首页 > 代码库 > 多物体的淡入淡出，多物体运动框架
多物体的淡入淡出，多物体运动框架
上面一个小例子展示了一张图片的淡入淡出，但实际情况可能有多个物体，在不同的物体之间进行切换，其实原理一样，只是添加多个不同的参数，控制定时器的开启与关闭，下面来展示在多个div之间来回切换，实现淡入淡出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*******************此处的透明度有两个样式，主要解决 览器之间的兼容性问题****************/
div{ width: 100px;height: 100px;background: red;margin: 10px;filter: alpha(opacity:30);opacity: 0.3; }
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName(‘div‘);
var i=0;
for(i=0;i<oDiv.length;i++){
oDiv[i].timer = null; //为每个div都加上自己的定时器，这样可以避免相互影响，虽然有点浪费，但应该是值得的
oDiv[i].alpha=30; //给每个div都加上自己的透明度，防止相互影响
oDiv[i].onmouseover = function(){
startMove(this,100); //将当前div的透明度设置为100
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}
};
function startMove(obj,iTarget){ //这里设置两个参数，设置对象和要改变的目标值
clearInterval(obj.timer);
var iSpeed = 0;
obj.timer = setInterval(function(){
if(obj.alpha<iTarget){ //比较当前div的透明和目标的透明度
iSpeed = 10;
}else{
iSpeed = -10;
}
if(obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=iSpeed;
obj.style.filter = ‘alpha(opacity:‘+obj.alpha+‘)‘;
obj.style.opacity = obj.alpha/100; //设置当前div透明度的样式
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
这是个小例子，可以从里面发掘一些思路
多物体的淡入淡出，多物体运动框架