Javascript controls the transparency properties of the Div layer to be displayed gradually from shallower to shallower
Carry of save oneself to see later!
Copy the code in blue below and save it as an HTML file. Use a web browser to browse
The code supports IE6, 7, 8/firefox/Chrome
<!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=gb2312" />
<title>javascript control Div Layer transparency property , Gradually from shallow to deep , Fade from deep to shallow </title>
<script>
var SysIsIE;
var ua = navigator.userAgent.toLowerCase();
var s;(s = ua.match(/msie ([d.]+)/)) ? SysIsIE = s[1] : 0;
function Q(s){
return document.getElementById(s);
}
function dvck(){
idstr='tian';
e=Q(idstr);
if(e){
e.parentNode.removeChild(e);
}
var div=document.createElement("div");
div.style.position="absolute";
div.style.top='10%';
div.style.left='40%';
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';
div.id=idstr;
//div.innerHTML='<img src="i.jpg" onclick="cleand(''+idstr+'')" />';
div.innerHTML='<p style="color:#fff;text-align:center;">div Layer displays the content ,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"> Shut down </a></p>';
document.body.appendChild(div);
if (SysIsIE)
dcbIE(idstr,'+');
else
dcboth(idstr,'+');
}
function dcbIE(s,j){
o=Q(s);
opc=parseInt(o.filters.alpha.opacity);
if(j=='+'){
if(opc<100){
o.filters.alpha.opacity=(opc+10)+'';
setTimeout("dcbIE('"+s+"','"+j+"')",100);
}
}else if(j=='-'){
if(opc>0){
o.filters.alpha.opacity=(opc-10)+'';
setTimeout("cleand('"+s+"','"+j+"')",100);
}
}
}
function dcboth(s,j){
o=Q(s);
opc=parseFloat(o.style.opacity);
if(j=='+'){
if(opc<1){
o.style.opacity=(opc+0.1)+'';
//setInterval("dcboth('"+s+"')",3000);
setTimeout("dcboth('"+s+"','"+j+"')",100);
}
}else if(j=='-'){
if(opc>0){
o.style.opacity=(opc-0.1)+'';
setTimeout("cleand('"+s+"','"+j+"')",100);
}
}
}
function cleand(s){
if (SysIsIE){
dcbIE(s,'-');
}else{
dcboth(s,'-');
}
}
</script>
</head>
<body>
<div><br><br>
<p style="font-size:14px">javascript control Div Layer transparency property , Gradually from shallow to deep , Fade from deep to shallow .</p><br><br>
<br><br><br>
<p> Click on the 'click' According to layer , Gradually from shallow to deep </p><br><br><br><br>
<a href="javascript:dvck()">click</a><br><br><br><br>
<p> Click on the layer shown , It can fade from deep to shallow </p>
<br><br><br>
<p>
<!-- #BeginDate format:Am3m -->02/11/2011 16:17<!-- #EndDate --> --- author : <a href="http://hi.baidu.com/bluid">bluid</a>
</p>
<br><br><br><br>
<br><br>
</div>
</body>
</html>