您的位置：首页 > Web前端 > JavaScript

42、JavaScript的运动----多个物体同时运动

2016-06-23 13:56 567 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript JavaScript的运动 DIV的淡入淡出

相关文章推荐

新的分享

章节导航