jquery 滾動到指定位置觸發動畫


jquery 滾動到指定位置觸發動畫

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sas</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.gs{
position:relative;
top:800px;
background-color:#099;
left:150px; width:80px;
}
.xz{

animation:roate 2s;
animation-fill-mode:forwards;
animation-direction:alternate;
}

@keyframes roate{
from { transform:rotate(0deg);
width:100px;
height:100px; }
to{transform:rotate(360deg);
width:200px;
height:200px;
}}
.xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}

</style>
</head>

<body>
<script type="text/javascript">
function gdjz(div,cssname,offset){
var a,b,c,d;
d=$(div).offset().top;
a=eval(d + offset);
b=$(window).scrollTop();
c=$(window).height();
if(b+c>a){
$((div)).addClass((cssname));
}
}

$(document).ready(function(e) {
$(window).scroll(function(){
gdjz("#dh",'xz',100);
}

/*var a,b,c;
a=$("#dh").offset().top;//元素相對於窗口的距離
b=$(window).scrollTop(); //監控窗口已滾動的距離;
c=$(document).height();//整個文檔的高度
d=$(window).height();//瀏覽器窗口的高度*/

/*if(d+b>a+100){
$("#dh").addClass("xz");
}
*/
);
});
</script>
<div style="height:1800px; background-color:#999; width:500px; float:left;">
<div id="dh" class="gs" >觸發動畫</div>
</div>
<div class="xs"></div>
</body>
</html>




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com