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，使其多个属性值发生改变，看起来就像是运动一样，是不是很简单呢？祝各位在前段的道路上越走越远，早日成为优秀的前段工程师。
标签：opacity,iCur,attr,dom,物体,js,多值,iSpeed 来源： https://www.cnblogs.com/wlcwdl/p/10402937.html