多物体淡入淡出

来源：互联网发布：软件测试方法详解编辑：程序博客网时间：2024/05/22 10:38

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

div{

width:200px;

height:200px;

background-color: red;

margin:20px;

float:left;

filter: alpha(opacity:30);

opacity:0.3;

}

</style>

</head>

<body>

<scripttype="text/javascript">

varaDivs = document.getElementsByTagName("div");

for (var i = 0; i< aDivs.length; i++) {

aDivs[i].timer = null;

aDivs[i].alpha = 30;

aDivs[i].onmouseover= function() {

startMove(this,100);

}

aDivs[i].onmouseout= function() {

startMove(this,30);

}

//var alpha = 30;

functionstartMove(obj,iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

varspeed = (iTarget - obj.alpha)/ 10;

speed= speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(obj.alpha == iTarget) {

clearInterval(obj.timer);

} else {

obj.alpha+= speed;

obj.style.opacity= obj.alpha / 100;

obj.style.filter= "alpha(opacity:"+ obj.alpha + ")";

}

}, 20);

}

// 1. 获取元素

// 2. 事件绑定

// 3. 运动函数

// 4. 清除定时器

// 5. 设置定时器

// 6. 速度

// 7. 速度取整

// 8. 判断是否到目标位置

// 9. 到了清除定时器，不到继续运动

// var aDivs = document.getElementsByTagName("div");

// for (var i = 0; i < aDivs.length; i++) {

// aDivs[i].timer = null;

// aDivs[i].onmouseover = function() {

// }

// aDivs[i].onmouseout = function() {

// }

// function startMove(obj, iTarget) {

// clearInterval(obj.timer);

// obj.timer = setInterval(function() {

// var speed = (iTarget - obj.offsetTop) / 10;

// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

// if (obj.offsetTop == iTarget) {

// clearInterval(obj.timer);

// } else {

// obj.style.top = obj.offsetTop + speed + 'px';

// }

// }, 20);

// }

</script>

</body>

</html>

1 0