Home >Web Front-end >JS Tutorial >JavaScript controls the transparency attribute of the Div layer to gradually display from shallow to dark and from deep to shallow_javascript skills

JavaScript controls the transparency attribute of the Div layer to gradually display from shallow to dark and from deep to shallow_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 17:15:541618browse

I’ll save the moving parts for later viewing!

Copy the blue code below and save it as a file in html format, and use a web browser to view the effect

The code supports IE6, 7, 8/firefox/Chrome browsers

Copy code The code is as follows:





javascript controls Div layer Transparent attribute, gradually displayed from light to dark, and gradually disappeared from dark to light
<script> <br>var SysIsIE; <br>var ua = navigator.userAgent.toLowerCase(); <br> var s;(s = ua.match(/msie ([d.] )/)) ? SysIsIE = s[1] : 0; <br><br>function Q(s){ <br>return document.getElementById (s); <br>} <br>function dvck(){ <br>idstr='tian'; <br>e=Q(idstr); <br>if(e){ <br>e.parentNode. removeChild(e); <br>} <br>var div=document.createElement("div"); <br>div.style.position="absolute"; <br>div.style.top='10%' ; <br>div.style.left='40%'; <br>div.style.cssText='filter: alpha(opacity=10);opacity:0.1;position:absolute;top:50%;left:50 %;width:544px;height:354px;margin-top:-177px;margin-left:-272px;;background-color:#000'; <br>div.id=idstr; <br>//div.innerHTML ='<img src="i.jpg" onclick="cleand('' idstr '')" />'; <br>div.innerHTML='<p style="color:#fff;text- align:center;">The content displayed in the div layer, author:<a href="http://hi.baidu.com/bluid" style="color:#FBFC4D">bluid</a>< br><br><br><br><br><a href="javascript:cleand('' idstr '')" style="color:#FEF8C3">Close</a&gt ;</p>'; <br>document.body.appendChild(div); <br>if (SysIsIE) <br>dcbIE(idstr,' '); <br>else <br>dcboth(idstr,' '); <br>} <br>function dcbIE(s,j){ <br>o=Q(s); <br>opc=parseInt(o.filters.alpha.opacity); <br>if(j ==' '){ <br>if(opc<100){ <BR>o.filters.alpha.opacity=(opc 10) ''; <BR>setTimeout("dcbIE('" s "','" j "')",100); <BR>} <BR>}else if(j=='-'){ <BR>if(opc>0){ <br>o.filters.alpha.opacity=( opc-10) ''; <br>setTimeout("cleand('" s "','" j "')",100); <br>} <br>} <br>} <br>function dcboth( s,j){ <br>o=Q(s); <br>opc=parseFloat(o.style.opacity); <br>if(j==' '){ <br>if(opc<1) { <BR>o.style.opacity=(opc 0.1) ''; <BR>//setInterval("dcboth('" s "')",3000); <BR>setTimeout("dcboth('" s " ','" j "')",100); <BR>} <BR>}else if(j=='-'){ <BR>if(opc>0){ <br>o.style.opacity =(opc-0.1) ''; <br>setTimeout("cleand('" s "','" j "')",100); <br>} <br>} <br>} <br><br><br>function cleand(s){ <br>if (SysIsIE){ <br>dcbIE(s,'-'); <br>}else{ <br>dcboth(s,'-'); <br>} <br>} <br></script>





< p style="font-size:14px">javascript controls the transparency attribute of the Div layer, gradually showing from shallow to dark, and gradually disappearing from dark to shallow.




< br>


Click 'click' to display the layer, which will gradually appear from shallow to dark




click




In the displayed layer Click on it to fade from dark to light







02/11/2011 16:17 --- author: bluid< /a>