JavaScript实现多个物体同时运动
本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码，供大家参考，具体内容如下
1、多个物体同时运动
---例子：多个Div，鼠标移入变宽
单定时器，存在问题
每个Div一个定时器
2、多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
---例子：多个Div淡入淡出
所有东西都不能公用
属性与运动对象绑定：速度、其他属性值（如透明度等）
3、多个Div，鼠标移入变宽的例子
3.1 代码
<head>
<meta charset="UTF-8">
<title>多物体运动框架</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background: red;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取元素
var aDiv = document.getElementsByTagName("div");
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].onmousemove = function() {
startMove(this, 300);
}
aDiv[i].onmouseout = function() {
startMove(this, 100);
}
}
}
//运动函数
function startMove(obj, iTarget) {
//清楚定时器函数
//由于是是适应于多个对象的变化,所以每个DIV有一个定时器
clearInterval(obj.timer);
//定时器函数
//每一个对象,有一个定时器
obj.timer = setInterval(function() {
//记录速度
var iSpeed = (iTarget - obj.offsetWidth) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//运动和停止的判断条件
if (obj.offsetWidth == iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
3.2 多个DIV淡入淡出的例子
<head>
<meta charset="UTF-8">
<title>多物体运动框架</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取元素
var aDiv = document.getElementsByTagName("div");
for (var i = 0; i < aDiv.length; i++) {
//将alpha作为,物体的一个属性
aDiv[i].alpha = 30;
aDiv[i].onmousemove = function() {
startMove(this, 100);
}
aDiv[i].onmouseout = function() {
startMove(this, 30);
}
}
}
//运动函数
function startMove(obj, iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
//定时器函数
obj.timer = setInterval(function() {
//记录速度
var iSpeed = (iTarget - obj.alpha) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//运动和停止的判断条件
if (obj.alpha == iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
} else {
obj.alpha += iSpeed;
obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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运动改变单物体透明度的方法.分享给大家供大家参考,具体如下: 除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () { startMove(100); } oDiv.onmouseout
-
Javascript 多物体运动的实现
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. 复制代码 代码如下: <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 10px; } </
-
javascript多物体运动实现方法分析
本文实例讲述了javascript多物体运动实现方法.分享给大家供大家参考,具体如下: 这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用. 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100
-
JavaScript运动框架 多物体任意值运动（三）
前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化. 从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值! function getStyle(obj, name
-
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实现多物体运动的方法.分享给大家供大家参考,具体如下: 基本步骤 1.通过getElementsByTagName获取到要做多物体运动的元素 2.然后for循环遍历元素,添加事件 3.定义startMove函数,需要两个参数,当前"做运动"的元素,和目标值target 注意问题:在多物体运动中,所有的东西不能公用: <script> window.onload = function(){ var liTags = document.getElementsB
-
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
-
JS实现多物体缓冲运动实例代码
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> div { width: 100px
-
js多个物体运动功能实例分析
本文实例分析了js实现的多个物体运动功能.分享给大家供大家参考,具体如下: 与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++)