点滴积累【JS】---JS小功能（JS实现动态添加运动属性)
效果：
思路：
首先遍历div挨个执行onmouseover事件，再设置获取非行间样式。然后编写setInterval计时器框架，框架内容是：将三个参数 div、div属性、div的目标点，分别获得，然后设置计时器，设置div的移动速度，然后进位转换，再判断什么时候停止，再进行移动。
代码：
1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 div 5 { 6 width: 200px; 7 height: 200px; 8 background: #FF0000; 9 margin: 10px; 10 border: 5px solid black; 11 float:left; 12 } 13 </style> 14 <script type="text/javascript"> 15 16 window.onload = function () { 17 var oDivAll = document.getElementsByTagName('div'); 18 for (var i = 0; i < oDivAll.length; i++) { //遍历div触发事件 19 oDivAll[i].timer = null; 20 oDivAll[i].onmouseover = function () { 21 move(this, 'font-size', 50); //添加【任意属性】进行改变 22 } 23 oDivAll[i].onmouseout = function () { 24 move(this, 'font-size', 20); 25 } 26 } 27 }; 28 function getStyle(obj, name) { //获取非行间样式 29 if (obj.currentStyle) { //判断兼容性 30 return obj.currentStyle[name]; //兼容IE 31 } 32 else { 33 return getComputedStyle(obj, false)[name]; //兼容Chrome FF 34 } 35 } 36 function move(obj, attr, end) { //框架部分 37 clearInterval(obj.timer); //清除之前计时器 38 obj.timer = setInterval(function () { //开始相应物体的计时器 39 var objStyle = parseInt(getStyle(obj, attr)); //该物体的属性参数 40 var speed = (end - objStyle) / 5; //（终点-每次移动的距离）/缩放系数=要走的速度 41 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //小数取整，进位取整 42 if (objStyle == end) { //如果距离到达终点那么就关闭计时器 43 clearInterval(obj.timer); 44 } 45 else { 46 47 obj.style[attr] = objStyle + speed + 'px'; //根据属性进行运动 48 } 49 }, 30) 50 } 51 </script> 52 </head> 53 <body> 54 <div id="div1"> 55 </div> 56 <div id="div2"> 57 </div> 58 <div>青苹果</div> 59 </body>
