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)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序使用this.setData()遇到的问题及解决方案详解
this.setData估计是小程序中最经常用到的一个方法,但是要注意其实他是有限制的,忽略这些限制的话,会导致数据无法更新,下面这篇文章主要给大家介绍了关于微信小程序使用this.setData()遇到的问题及解决方案,需要的朋友可以参考下2022-08-08
扩展javascript的Date方法实现代码(prototype)
长期从事C#的开发，被C#影响着我的思维。C#中DateTime的操作就很方便，于是就参考它对js的Date做了扩展。2010-11-11
这篇文章主要介绍了JavaScript中的异常捕捉介绍,本文讲解了throw语句抛出异常,try/catch/finally语句捕捉异常,需要的朋友可以参考下2014-12-12
本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。2015-07-07
jqgrid并没有自带导出表格数据的方法，这里就自己实现了一个，尝试过在页面直接将数据导出，发现只有IE下可以通过调用saveas来实现，但是别的浏览器不支持，于是考虑将数据传回后台，然后后台返回下载文件来实现2013-11-11
这篇文章主要介绍了微信小程序整合使用富文本编辑器的方法,结合实例形式分析了微信小程序整合与使用富文本插件WxParse相关步骤与操作技巧,需要的朋友可以参考下2019-04-04
兼容ie、firefox的图片自动缩放的css跟js代码分享
最近编辑反应，图片有时候太大了，如果隐藏了，可能部分内容别人就看不到了，如果手工设置图片大小又太麻烦了，这里就提供一个方法让也没的图片等比例缩放2013-08-08
JS是一门计算机编程语言，是一门动态语言也称为脚本语言，是解析型编程语言。需要了解跟多2012-11-11
这篇文章主要介绍了JavaScript关联数组用法,结合实例形式分析了关联数组的概念、定义与遍历操作相关实现技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
最新评论