php中加载图片淡入淡出,js实现图片匀速淡入淡出

这次给大家带来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)

}