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

时间：2021-05-25

利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。

<!doctype html><html><head><meta charset="utf-8"><title>sas</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.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',500); } );});</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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章