RT,是參照慕課的教程做的。兩個多小時的教程，看完了然后晚上的時候做了下，看的時候感覺明白了，但其實做的時候還是有很多小細節需要處理的。
上代碼，思想什么的直接去慕課看教程就好了。點擊這里
注釋也比較清楚，應該能看得懂
-------16年12.5更新-------
想做全屏滾動，發現這個框架不支持，於是做了點小改動，支持document.body的scrollTop屬性還有其他部分寬高屬可自行測試，順帶修復了一部分小bug
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> </title> 6 7 <style> 8 #aaa{ 9 position:absolute; 10 left:-50px; 11 width: 100px; 12 height: 100px; 13 background-color: blue; 14 border:1px solid red; 15 } 16 #ddd{ 17 position:absolute; 18 top:120px; 19 left:-50px; 20 width: 100px; 21 height: 100px; 22 background-color: red; 23 filter: alpha(opacity:30); 24 opacity: 0.3; 25 } 26 </style> 27 </head> 28 <body> 29 <div id = "aaa">123</div> 30 </body> 31 <script type="text/javascript" src="./js/animate.js"></script> 32 <script type="text/javascript"> 33 window.onload=function(){ 34 var aaa = document.getElementById('aaa'); 35 var ddd = document.getElementById('ddd'); 36 37 aaa.onmouseover=function(){ 38 showAnimate(this,{'width':200,'height':200}); 39 } 40 aaa.onmouseout=function(){ 41 showAnimate(this,{'width':100,'height':100}); 42 } 43 } 44 </script> 45 </html>
1 /** 2 *函數作用：執行動畫 3 *接受參數：obj（需要運動的DOM元素） 4 * json（需要改變的屬性集合，json格式） 5 * fn（回調函數） 6 */ 7 function showAnimate(obj,json,fn){ 8 clearInterval(obj.timer); 9 //表示運動是否都已經停止 10 var flag = true; 11 obj.timer=setInterval(function(){ 12 //循環json 13 for(var i in json){ 14 if(i == 'opacity'){ 15 //獲取透明度值，round四舍五入去除小數點 16 var icur = Math.round(parseFloat(getStyle(obj,i))*100); 17 } 18 else{ 19 //獲取屬性值 20 var icur = parseInt(getStyle(obj,i))||obj[i]; 21 } 22 //緩沖運動，speed隨時變換 23 var speed = (json[i]-icur)/10;//千萬要寫在定時器里面，寫在外面會有意想不到的后果 24 speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);//速度向上或者下取整，防止到不了over位置 25 //如果有一個沒到達終點就是false 26 if(json[i] !== icur){ 27 flag = false; 28 }else{ 29 flag = true; 30 } 31 if(i == 'opacity'){ 32 obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';//IE兼容 33 obj.style.opacity = (icur+speed)/100; 34 }else if(i == 'scrollTop'){ 35 obj[i] = icur+speed; 36 37 } 38 else{ 39 obj.style[i] = icur+speed+'px'; 40 } 41 console.log(icur + ' ' + json[i]); 42 } 43 //檢查是否所有的運動都已經停止 44 if(flag){ 45 clearInterval(obj.timer); 46 if(fn){ 47 fn(); 48 } 49 } 50 },13); 51 } 52 /** 53 *函數作用：返回樣式屬性值 54 *接受參數：obj（需要獲取屬性的DOM元素） 55 * attr（需要獲取的屬性名稱） 56 */ 57 function getStyle(obj,attr) 58 { 59 if(obj.currentStyle) 60 { 61 return obj.currentStyle[attr];//IE兼容 62 } 63 else 64 { 65 return getComputedStyle(obj,false)[attr]; 66 } 67 } 68 </script>
看完以后再做的時候還是碰到了不少小問題。
1.將speed移到setInterval外面時出現了一個莫名其妙的小bug，比如定時器設置的是1000毫秒，然后給兩個DIV，各自設置鼠標移入移出事件，當我移入第一個DIV並且移出以后，只要在1000毫秒內，也就是移出定時器還沒出發的時候迅速移動到另一個DIV上，第一個DIV就會一直執行移入事件（或者說是在第一個DIV上執行第二個DIV的事件），各位可以去試試，求大神解答。
2.getComputedStyle，看教程是可以寫成getComputedStyle(obj,false).attr這種形式的，但是在實踐中發現雖然沒報錯，但是返回是個空的。所以還是寫成了getComputedStyle(obj,false)[attr];
只有這兩個教程里面沒講，其他的speed取整問題， opacity特殊處理，小數點處理問題都在視頻里有講過