Posted in Javascript onNovember 12, 2013
相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body {margin:0;padding:0;color:#000000;} #div_test { width: 100%; height: 100%; background-color: #000000; position:absolute; filter:Alpha(Opacity=0) } </style> <script type="text/javascript"> var i = 100; function $(id) {return document.getElementById(id);} function chang_display() { i--; var div = $('div_test'); div.style.filter = "Alpha(Opacity="+i+")"; div.style.opacity = i / 100; if ( i== "0") {document.getElementById('div_test').style.display="none";//隐藏 exit } } /*控制div隐藏*/ function hid() { setInterval(chang_display, 1); } </script> </head> <body> <div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div> <div><a href="http://bbs.csdn.com">123</a>123123</div> </body> <script defer="defer"> var j = 0; function $(id) {return document.getElementById(id);} function turn_display() { j++; var div = $('div_test'); div.style.filter = "Alpha(Opacity="+j+")"; div.style.opacity = j / 100; if ( j== "0") {document.getElementById('div_test').style.display="none";//隐藏 exit } } setInterval(turn_display, 1); </script> </html>
js控制淡入淡出示例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@