点滴积累【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>
原文地址:https://www.cnblogs.com/xinchun/p/3450308.html