这次给大家带来js实现图片匀速淡入淡出,js实现图片匀速淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下。
淡入效果* {
margin: 0;
padding: 0;
}
p {
border: 2px solid #aaa;
}
img {
width: 300px;
height: 300px;
filter: alpha(opacity:30);
opacity: .3;
margin: 0 auto;
}
var alpha=30;
var img = document.getElementById("img");
img.οnmοuseοver=function(){
startMove(100)
};
img.οnmοuseοut=function(){
startMove(30)
}
var timer;
function startMove(tar) {
var img = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function () {
var ispeed=0;
ispeed= alpha
if(alpha==tar){
clearInterval(timer)
}
else{
alpha+=ispeed;
img.style.filter="alpha(opacity:"+alpha+")";
img.style.opacity=alpha/100;
}
}, 30)
}