话不多说，我们就开始自己动手封装一个带有缓冲运动的多物体运动框架吧。该框架具有强大的功能，用一个函数，就可实现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)。
-
下面贴上一个图片例子和详细的代码。
- 详细代码，一定要先看上面的解析哦。
function getStyle(obj, name) {
//例：obj:div元素；name:div元素的css属性名称
//currentStyle和getComputedStyle：获取当前元素所使用的css属性值
if (obj.currentStyle) {
//IE浏览器
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name]; //Chrome浏览器
}
}
var timer = null;
function remove(obj, attr, iTarget) {
//obj:(html如：div) attr:obj的css属性， iTarget:目标值
clearInterval(obj.timer); //先停掉定时器
obj.timer = setInterval(() => {
var curr = 0; //物体自身高度
if (attr == "opacity") {
curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
//parseFloat为适应透明度
} else {
curr = parseInt(getStyle(obj, attr));
//移动的宽，高度等,相当于offsetHight
}
var speed = (iTarget - curr) / 6; //物体移动速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//Math.ceil():向上取整，取最大的；Math.floor():向下取整，取最小的
if (curr == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == "opacity") {
//为适应透明度
obj.style.filter = "alpha(opacity:" + (speed + curr) + ")";
obj.style.opacity = (curr + speed) / 100;
} else {
obj.style[attr] = curr + speed + "px";
}
}
}, 30);
}
- 上面图片中的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>
~~*完结，觉得文章对你有帮助或者写的还不错，记得关注点赞评论哟*~~
