多物体的淡入淡出，多物体运动框架

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/slientLove/p/5878856.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的DIV淡入淡出效果实现方法，通过设置透明度和使用定时器实现鼠标悬停时的平滑过渡效果。

上面一个小例子展示了一张图片的淡入淡出，但实际情况可能有多个物体，在不同的物体之间进行切换，其实原理一样，只是添加多个不同的参数，控制定时器的开启与关闭，下面来展示在多个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>