物体淡入淡出

来源:互联网 发布:淘宝小号哪里买 编辑:程序博客网 时间:2024/05/22 06:09

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

#div1{

width:200px;

height:200px;

background-color: red;

/* 兼容IE的透明度 0 - 1 */

filter: alpha(opacity:30);

opacity:0.3;

}

</style>

</head>

<body>

<div id="div1"></div>

<scripttype="text/javascript">

varoDiv = document.getElementById("div1");

oDiv.onmouseover= function(){

startMove(100);

};

oDiv.onmouseout= function(){

startMove(30);

};

// 函数淡入

vartimer = null;

// 定义一个变量保存透明度的值

varalpha = 30;

functionstartMove(iTarget){

speed = 0;

if(alpha< iTarget){

speed= 5;

}else{

speed= -5;

}

clearInterval(timer);

timer = setInterval(function(){

if(alpha == iTarget) {

clearInterval(timer);

}else{

// 让alpha变量随着定时器自增

alpha+= speed;

oDiv.style.opacity= alpha / 100;

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

}

},20);

}

</script>

</body>

</html>

0 0