jq 在页面某个位置触发点击_利用jquery制作滚动到指定位置触发动画

利用jquery制作滚动到指定位置触发动画

*{ margin:0px; padding:0px;}

.gs{

position:relative;

top:100px;

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;}

/*var a,b,c;

a=$("#dh").offset().top;//元素相对于窗口的距离

b=$(window).scrollTop(); //监控窗口已滚动的距离;

c=$(document).height();//整个文档的高度

d=$(window).height();//浏览器窗口的高度

element 标签

cssname 动画

offset 相对于窗口的距离

*/

function scrollnumber(element,cssname,offset){

var a,b,c,d;

d=$(element).offset().top;

a=eval(d + offset);

b=$(window).scrollTop();

c=$(window).height();

if(b+c>a){

$((element)).addClass((cssname));

}

}

function scrollfun(){

scrollnumber("#dh1",'xz',100);

scrollnumber("#dh2",'xz',100);

scrollnumber("#dh3",'xz',100);

scrollnumber("#dh4",'xz',100);

}

$(document).ready(function(e) {

scrollfun();

$(window).scroll(function(){

scrollfun();

});

});

触发动画111

触发动画222

触发动画333

触发动画444