Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 17:15:54
Original
1568 people have browsed it

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>













source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template