一、HTML
<img id="img1" src="luban.jpg" alt="" />
二、CSS
#img1{
opacity:0.3;
}
三、javascript
window.onload=function(){
var oImg=document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100);
}
oImg.onmouseout=function(){
startMove(30);
}
}
var opac=30;
var timer=null;
fuicntion startMove(iTarget){
var oImg=document.getElementById('img1');
clearInterval(timer);
var iSpeed=0;
timer=setInterval(function(){
if(opac<iTarget){
iSpeed=1;
}else{
iSpeed=-1;
}
if(opac==iTarget){
clearInterval(timer);
}else{
opac+=iSpeed;
oImg.style.opacity=opac/100;
},30)
四、最终效果