<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="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>
<script type="text/javascript">
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(100);
};
oDiv.onmouseout = function(){
startMove(30);
};
// 函数淡入
var timer = null;
// 定义一个变量保存透明度的值
var alpha = 30;
function startMove(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>
扫一扫
4889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
