利用jquery制作滚动到指定位置触发动画
利用CSS3的animation动画特性来完成的,对IE的兼容性不是太好,适用与手机端。
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>sas</title> <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <styletype="text/css"> *{margin:0px;padding:0px;} .gs{ position:relative; top:800px; background-color:#099; left:150px;width:80px; } .xz{ animation:roate2s; animation-fill-mode:forwards; animation-direction:alternate; } @keyframesroate{ 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> <scripttype="text/javascript"> functiongdjz(div,cssname,offset){ vara,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); } /*vara,b,c; a=$("#dh").offset().top;//元素相对于窗口的距离 b=$(window).scrollTop();//监控窗口已滚动的距离; c=$(document).height();//整个文档的高度 d=$(window).height();//浏览器窗口的高度*/ /*if(d+b>a+100){ $("#dh").addClass("xz"); } */ ); }); </script> <divstyle="height:1800px;background-color:#999;width:500px;float:left;"> <divid="dh"class="gs">触发动画</div> </div> <divclass="xs"></div> </body> </html>