Rumah >hujung hadapan web >tutorial js >javascript匀速运动实现淡入淡出的效果(代码)
本篇文章给大家带来的内容是关于javascript匀速运动实现淡入淡出的效果(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在做p或者图片淡入淡出的时候,我们主要用到了透明度样式filter: alpha(opacity:30)兼容ie,opacity:0.3兼容火狐chrome。
运动淡入淡出时用到了定时器setInterval;clearInterval;
js操作淡入淡出时用下面形式修改透明度op.style.filter="alpha(opacity:"+alpha+")";op.style.opacity=alpha/100;
注意:透明度无法直接在js中做判断,我们采用alpha参数做比较,最后应用到对象上。
<!DOCTYPE html> <html> <head> <title>div淡入淡出</title> <style> #div1{ width: 200px; height: 200px; background: red; /* ie */ filter: alpha(opacity:30); /* chrome firefox */ opacity:0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } } var timer=null; var alpha=30;//透明度默认30 function startMove(iTarget){ var oDiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha<iTarget){ speed=5; }else{ speed=-5; } if(alpha===iTarget){ clearInterval(timer); }else{ alpha+=speed; oDiv.style.filter="alpha(opacity:"+alpha+")"; oDiv.style.opacity=alpha/100; } },30); } </script> </head> <body> <div id="div1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>图片淡入淡出</title> <style> #img1{ /* ie */ filter: alpha(opacity:30); /* chrome firefox */ opacity: 0.3; border: 1px solid #000; } </style> <script> window.onload=function(){ var oImg=document.getElementById("img1"); oImg.onmouseover=function(){ startMove(100); } oImg.onmouseout=function(){ startMove(30); } } var timer=null; var alpha=30;//透明度默认30 function startMove(iTarget){ var oImg=document.getElementById("img1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha<iTarget){ speed=5; }else{ speed=-5; } if(alpha===iTarget){ clearInterval(timer); }else{ alpha+=speed; oImg.style.filter="alpha(opacity:"+alpha+")"; oImg.style.opacity=alpha/100; } },30); } </script> </head> <body> <img id="img1" src="img1.jpg" alt=""> </body> </html>
相关推荐:
Atas ialah kandungan terperinci javascript匀速运动实现淡入淡出的效果(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!