利用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); } /*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>新聞熱點
疑難解答
