js控制html图片淡入淡出,纯js实现图片匀速淡入淡出效果

图片匀速淡入淡出效果如下：

淡入效果

* {

margin: 0;

padding: 0;

}

div {

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)

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。