淡入淡出在实际的应用中经常用到，实现原理很简单，就是动态的修改他的opcity的值
以下为实现代码，需要注意的地方已经写好注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
height: 300px;
width: 150px;
margin-left: 30px;
filter:alpha(opacity=30);
opacity:0.3;
}
</style>
</head>
<body>
<img id="img" src="img/danrudanchu.jpg"/>
</body>
<script>
var alpha = 30;
var timer = null;
window.onload = function(){
var img = document.getElementById("img");
img.onmousemove = function(){
startMove(100);
}
img.onmouseout = function(){
startMove(30);
}
}
function startMove(target){
var img = document.getElementById("img");
var speed = 0;
//每次开始就先关闭一下定时器，防止上一个定时器还未关闭，导致多个定时器同时工作
clearInterval(timer);
timer = setInterval(function(){
//原先的alpha>target,表示淡出
if(alpha>target){
speed = -5;
}else{
speed = 5;
}
alpha += speed;
//相等之后，关闭定时器，停止淡出或者淡入效果
if(alpha==target){
clearInterval(timer);
}else{
img.style.filter = 'alpha(opacity='+alpha+')';
img.style.opacity = alpha/100;
}
},30);
}
</script>
</html>
网友评论