龙空技术网

JS鼠标移入移出透明度变化

支棱的三十岁 1420

前言:

如今小伙伴们对“js怎么添加鼠标移入移出变色事件”都比较注重,我们都想要学习一些“js怎么添加鼠标移入移出变色事件”的相关内容。那么小编也在网上汇集了一些有关“js怎么添加鼠标移入移出变色事件””的相关资讯,希望各位老铁们能喜欢,小伙伴们快快来了解一下吧!

一、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)

四、最终效果

标签: #js怎么添加鼠标移入移出变色事件