注意CSS中定义透明度的方式,非ie:opacity:0.5; (0-1) 之间
ie:Alpha(opacity = 50); 和上面那句效果相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#box1{
width: 100px;
height:100px;
background-color: pink;
opacity: 0.3;
filter:Alpha(opacity = 30); /*兼容IE8之前的浏览器*/
}
</style>
<body>
<div id = 'box1'></div>
<script type = "text/javascript">
var box1 = document.getElementById('box1');
var timer = null;
var alpha = 30;
box1.onmouseover = function(){
startMove(box1,100);
};
box1.onmouseout = function(){
startMove(box1,30);
};
function startMove(obj,target){
clearInterval(timer);
timer = setInterval(function(){
speed = (target-alpha)/10;
speed>0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
if (target == alpha){
clearInterval(timer);
}else {
alpha += speed;
obj.style.opacity = alpha/100;
obj.style.filter = "alpha(opacity="+alpha+")";
}
},30)
}
</script>
</body>
</html>