js之物体的多值运动

js运动

作为刚入门的小白，js 运动可以说是一个不可避免的步骤，为了更好的节约效率，下面提供了一种不错的封装方法供大家借鉴

 1 // 获取dom元素的attr属性
 2 function getStyle(dom, attr){
 3     if(window.getComputedStyle){
 4         return window.getComputedStyle(dom, null)[attr];
 5     }else{
 6         return dom.currentStyle[attr]; // 兼容IE
 7     }
 8 }
 9 
10 // 元素运动
11 function startMove(dom, attrObj){ // 参数为目标元素 包含多中属性的对象
12     clearInterval(dom.timer);
13     var iSpeed = null, // 速度
14         iCur = null; // 属性
15     dom.timer = setInterval(function(){
16         var bStop = true; // 锁
17         for(var attr in attrObj){
18             if( attr == 'opacity'){
19                 iCur = parseFloat(getStyle(dom, 'opacity')) * 100; // 由于透明度的取值在0~1之间，将值扩大100倍来实行缓冲运动
20             }else{
21                 iCur = parseInt(getStyle(dom, attr));
22             }
23             iSpeed = (attrObj[attr] - iCur) / 7; // 速度随时间推移而减少，从而完成缓冲运动
24             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 在js中，每次运动至少为1单位，这也是为什么要将透明度放大的原因
25             if(attr == 'opacity'){
26                 dom.style.opacity = (iCur + iSpeed) / 100;
27             }else{
28                 dom.style[attr] = iCur + iSpeed + 'px';
29             } 
30             if(iCur != attrObj[attr]){
31                 bStop = false;
32             }
33             if(bStop){
34                 clearInterval(dom.timer); // 当dom元素所有属性的运动全部结束时，清除定时器
35             }
36         }
37     }, 30);
38 }

接下来举例说明

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #demo{
10             width: 100px;
11             height: 100px;
12             background-color: red;
13             position: absolute;
14             top: 0;
15             left: 0;
16             opacity: 1;
17         }
18     </style> 
19 </head>
20 <body>
21     <div id="demo"></div> 
22     <script src="./tools.js"></script>
23     <script>
24         var oDiv = document.getElementById('demo');
25         oDiv.onclick = function(){
26             startMove(this, {width: 400, height: 400, left: 200, top: 200, opacity: 50});
27         }
28     </script>
29 </body>
30 </html>

由于代码量问题，这里将函数放到了 tools.js 文件中，首先为 div 绑定一个点击事件，然后调用函数 startMove，使其多个属性值发生改变，看起来就像是运动一样，是不是很简单呢？祝各位在前段的道路上越走越远，早日成为优秀的前段工程师。

秒客网

js之物体的多值运动

相关文章