用js封装一个多物体运动框架，可用于轮播图功能中。详解！

迷南。 2023-07-08 02:39 36阅读 0赞

## 话不多说，我们就开始自己动手封装一个带有缓冲运动的多物体运动框架吧。该框架具有强大的功能，用一个函数，就可实现js中物体的运动，透明度，宽高度的改变。并可用于图片轮播播放器中。 ##

#### 为了简化大家看代码的阅读时间，我把主要的函数功能逻辑用文字讲解一遍。 ####

*  **getStyle(obj,name)函数**  
    getStyle(obj, name)函数是为了去获取当前元素所使用的css值，如div标签元素中的height和width的值。  
    obj和name为形参，obj为物体的标签元素，name为当前标签元素的css值。//例：obj:div元素；name:div元素的css属性名称。  
    为了兼容IE这个神奇的浏览器，我们需要用到currentStyle()方法来获取标签元素的css属性。
 *  **remove()函数，是整个多物体运动框架的核心。**  
    remove(obj, attr, iTarget)函数中有3个参数，obj为标签元素，attr为标签元素的css属性，iTarget为物体运动的目标值。
 *  在运动开始之前，需要把定时器先关闭清理一次，这样做是为了避免出现多个定时器同时进行的情况。clearInterval(obj.timer); //先停掉定时器
 *  设置定时器，在定时器内包裹一个函数，所有的功能在这个函数体内完成。
 *  设置物体自身的初值 curr,设置初值的原因的计算物体的运动速度。
 *  因为在不同的浏览器中，物体的透明度opacity是个比较特殊是属性，为了能让不同的浏览器能兼容显示，需要进行特殊的判断curr =Math.round(parseFloat(getStyle(obj, attr)) \* 100)
 *  **接下来是计算物体的运动速度：var speed = (iTarget - curr) / 6;用iTarget目标值-curr物体当前位置，再除以一个值，用以调整物体运动速度的快慢。**  
    并对物体运动速度的正负值进行三目运算判断。
 *  最后一步，物体最终要移动的数值，用速度+当前自身数值来计算。**速度和自身数值是随着运动不断动态变化中的**，(speed + curr)。
 *  下面贴上一个图片例子和详细的代码。

![物体运动前][20200224164922106.PNG]![物体运动之后][20200224165041560.PNG]

*  ***详细代码，一定要先看上面的解析哦。***

*  上面图片中的html代码，在html中引用的remove.js这个多物体运动框架。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>多物体运动框架</title>
        <script src="remove.js"></script>
      </head>
      <body>
        <button onclick="sport()">点击运动</button>
        <div class="speed" id="play"></div>
      </body>
    
      <script> var play = document.getElementById("play"); function sport() { remove(play, "left", 200); play.onmousemove = function() { remove(play, "opacity", 100); }; } </script>
      <style> .speed { width: 100px; height: 100px; background: red; margin: 20px; position: absolute; left: 0; opacity: 0.6; } </style>
    </html>

~~*完结，觉得文章对你有帮助或者写的还不错，记得关注点赞评论哟*~~

[20200224164922106.PNG]: https://img-blog.csdnimg.cn/20200224164922106.PNG
[20200224165041560.PNG]: https://img-blog.csdnimg.cn/20200224165041560.PNG