代码描述:JavaScript 淡入淡出效果。JavaScript淡入淡出效果
使用jQuery可以轻松的实现div的淡入淡出效果,因为有已经封装好的函数直接调用,使用JavaScript实现就没有那么简单了,下面通过一个实例代码来分析一下如何实现此效果。 代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="http://www.51前端.com/" /> <title>div淡入淡出效果-51前端</title> <style type="text/css"> * { margin:0px; padding:0px; } #box { width:480px; height:270px; position:absolute; left:50%; top:50%; margin-left:-240px; margin-top:-135px; background-color:#333; } </style> <script type="text/javascript"> function func(o){ i=1; s=0.01; setInterval(function(){ i+=s; s = i < 0 ? 0.01 : (i > 1 ? -0.01 : s); if(o.filters){ o.filters[0].opacity=i*100; } else{ o.style.opacity=i; } },1) } window.onload=function(){ var odiv=document.getElementById("box"); func(odiv); } </script> </head> <body> <div id="box"></div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能