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多物体 任意值 链式 缓冲运动
复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h
-
JavaScript实现多个物体同时运动
本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码,供大家参考,具体内容如下 1.多个物体同时运动 ---例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器 2.多物体运动框架 定时器作为物体的属性 参数的传递:物体.目标值 ---例子:多个Div淡入淡出 所有东西都不能公用 属性与运动对象绑定:速度.其他属性值(如透明度等) 3.多个Div,鼠标移入变宽的例子 3.1 代码 <head> <meta charset=
-
JS运动改变单物体透明度的方法分析
本文实例讲述了JS运动改变单物体透明度的方法.分享给大家供大家参考,具体如下: 除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () { startMove(100); } oDiv.onmouseout
-
JS实现多物体缓冲运动实例代码
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> div { width: 100px
-
JS实现物体带缓冲的间歇运动效果示例
本文实例讲述了JS实现物体带缓冲的间歇运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl
-
JS多物体实现缓冲运动效果示例
本文实例讲述了JS多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl
-
javascript多物体运动实现方法分析
本文实例讲述了javascript多物体运动实现方法.分享给大家供大家参考,具体如下: 这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用. 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100
-
js多个物体运动功能实例分析
本文实例分析了js实现的多个物体运动功能.分享给大家供大家参考,具体如下: 与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++)
-
JS实现多物体运动的方法详解
本文实例分析了JS实现多物体运动的方法.分享给大家供大家参考,具体如下: 基本步骤 1.通过getElementsByTagName获取到要做多物体运动的元素 2.然后for循环遍历元素,添加事件 3.定义startMove函数,需要两个参数,当前"做运动"的元素,和目标值target 注意问题:在多物体运动中,所有的东西不能公用: <script> window.onload = function(){ var liTags = document.getElementsB
-
Javascript 多物体运动的实现
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. 复制代码 代码如下: <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 10px; } </