js实现动画效果框架
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特殊处理，小数点处理问题都在视频里有讲过
