JS实现多物体运动
时间：2022-08-13 12:17:34 | 栏目：JavaScript代码 | 点击：次
本文实例为大家分享了JS实现多物体运动的具体代码，供大家参考，具体内容如下
实现效果图：
描述：用JS实现简单的多物体运动动画，淡出淡化效果，当鼠标放在不同div上时，div会由宽100PX慢慢变成200PX，当鼠标移开之后div恢复原状，依次来，实现多物体运动效果。
基本步骤：
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target
具体代码如下：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="startMove.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: red;
/* opacity: 1; */
margin: 10px 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
// 改变div的width 、height、透明度、边框 {width:500,height:500,opacity:0.5}
var divs = document.getElementsByTagName('div');
for(var i = 0;i<divs.length;i++){
divs[i].onmouseenter = startMove(divs[i],{width:200,height:200,opacity:50},function(){
alert('over！')
});
}
for(var i = 0;i<divs.length;i++){
divs[i].onmouseleave = startMove(divs[i],{width:100,height:100,opacity:100});
}
</script>
</body>
</html>
js代码：
/**
*
* @param {*} dom 改变形态的dom对象
* @param {*} attrObj 要改变的所有元素的属性形成的对象
* @param {*} target 改变的目标值
* @returns
*/
function startMove(dom, attrObj, callback) {
var timer = null;
var speed = null;
// 元素属性的当前值
var iCur = null;
return function() {
clearInterval(dom.timer);
dom.timer = setInterval(function() {
var flag = true;
// 0. 循环遍历改变的属性对象 将每一个属性的形态都进行运动
for (var param in attrObj) {
// 1. 判断改变的属性是不是透明度
if (param === 'opacity') {
iCur = getComputedStyle(dom)['opacity'] * 100;
// console.log(iCur);
} else {
iCur = +getComputedStyle(dom)[param].slice(0, -2);
console.log(iCur);
}
// 2. 求出speed
speed = (attrObj[param] - iCur) / 7;
// 如果正值 向上取整(0.28 -> 1) 如果是负值 向下取整(-0.28 -> -1)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 改变div的属性的值
if (param === 'opacity') {
dom.style.opacity = (iCur + speed) / 100;
} else {
dom.style[param] = iCur + speed + 'px';
}
// 判断div所有属性是否到达目标值
if (iCur !== attrObj[param]) {
flag = false;
}
}
if (flag) {
// 所有属性值都到了目标阶段 可以清除定时器
clearInterval(dom.timer);
//
typeof callback === 'function' && callback();
}
// 上一个属性运动结束之后 再让下一个属性开始运行
// 让一个属性的目标值到达就停止定时器
}, 60)
}
}