JS实现多物体运动
更新时间：2022年05月08日 10:50:10 作者：不像话i
这篇文章主要为大家详细介绍了JS实现多物体运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现表单多按钮提交action的处理方法，需要的朋友可以参考下2015-10-10
这篇文章主要介绍了详解使用fetch发送post请求时的参数处理的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JS排序算法之冒泡排序，选择排序与插入排序,结合实例形式分析了冒泡排序，选择排序与插入排序的概念、原理及实现方法,需要的朋友可以参考下2017-12-12
不用div+css实现的js菜单特效代码用js+table实现 默认选中一个，点击后 选中的项目“变白”。不用css+div 高手给做一下 多谢了 演示站：www.allss.com.cn 演示站使用css+div的 改成js+table的2008-01-01
Javascript 函数parseInt()转换时出现bug问题
天测试的测出来的。parseInt(1.13*100)，实际返回值是112，下面有个示例，大家可以看看下2014-05-05
JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)
阅读了本书第五章关于使用JavaScript的最佳实践，大部分的建议之前都有耳闻，不过阅读之后有更深的体会2013-10-10
这篇文章主要介绍了Bootstrap模态框插入视频的实现代码,需要的朋友可以参考下2017-06-06
这篇文章主要给大家介绍了关于前端js中事件循环eventloop机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了js实现仿MSN带关闭功能的右下角弹窗代码,涉及javascript操作页面元素的布局及属性的动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
本文通过实例代码给大家介绍了js实现弹出框的拖拽效果，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
最新评论