点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)
效果：
思路：
首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！
代码：
1 <head id="Head1" runat="server"> 2 <title></title> 3 <style type="text/css"> 4 div 5 { 6 width: 100px; 7 height: 100px; 8 background: #00FF00; 9 left: 0; 10 position: absolute; 11 font-size: 20; 12 opacity: 0.3; 13 } 14 </style> 15 <script type="text/javascript"> 16 window.onload = function () { 17 var divOn = document.getElementById('div1'); 18 divOn.timer = null; 19 divOn.onmouseover = function () { 20 move(divOn, { width: 400, height: 350, fontSize: 50, opacity: 100 }); 21 }; 22 divOn.onmouseout = function () { 23 move(divOn, { opacity: 30, height: 100, fontSize: 20, width: 100 }); 24 }; 25 } 26 //-----以下为多功能缓冲框架部分--------------------------------------------------------------------------------------------------------- 27 //获取非行间样式 28 function getStyle(ojb, name) { 29 if (ojb.currentStyle) { 30 return ojb.currentStyle[name]; 31 } 32 else { 33 return getComputedStyle(ojb, false)[name]; 34 } 35 } 36 //缓冲运动json的应用 37 //json{attr,finsh} 38 //json{width:200,height:200} 39 function move(obj, json, fnName) { //obj是对象，Json是对象的属性， fnName是函数 40 clearInterval(obj.timer); //关闭之前的计时器 41 obj.timer = setInterval(function () { 42 var timeStop = true; //记录属性是否都已经执行完成 43 for (var attr in json) { //遍历json中的数据 44 var oGetStyle = 0; 45 if (attr == 'opacity') { //判断透明度 46 oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然后转换完后赋值 47 } 48 else { 49 oGetStyle = parseInt(getStyle(obj, attr)); 50 } 51 var speed = (json[attr] - oGetStyle) / 5; //求速度 52 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整 53 // if (oGetStyle == json[attr]) { //如果到达，则关闭计时器 54 // clearInterval(obj.timer); 55 // if (fnName) { //当关闭计时器后要执行的函数 56 // fnName(); 57 // } 58 // } 59 // else { 60 if (oGetStyle != json[attr]) 61 timeStop = false; 62 if (attr == 'opacity') { //透明度 63 obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值 64 obj.style.opacity = (oGetStyle + speed) / 100; 65 } 66 else { 67 obj.style[attr] = oGetStyle + speed + 'px'; //移动div 68 } 69 // } 70 } 71 if (timeStop) { //如果所有属性都已经执行完成，那么就关闭计时器 72 clearInterval(obj.timer); 73 if (fnName) { //当关闭计时器后要执行的函数 74 fnName(); 75 } 76 } 77 }, 30) 78 } 79 //----------------------------------------------------------------------------------------------------------------------- 80 </script> 81 </head> 82 <body> 83 <div id="div1"> 84 青苹果 85 </div> 86 </body>
