手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript控制Div层透明属性由浅变深由深变浅逐渐显示
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
摘要:搬运的留着以后自己看!复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果代码支持IE6、7、8/firefox/Chrome...

搬运的留着以后自己看!

复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果

代码支持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控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失</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" />';

div.innerHTML='<p>div层显示的内容,author:<a href="http://hi.baidu.com/bluid">bluid</a><br><br><br><br><br><a href="javascript:cleand(''+idstr+'')">关闭</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>javascript控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失.</p><br><br>

<br><br><br>

<p>单击'click'显示层,由浅变深逐渐显示</p><br><br><br><br>

<a href="javascript:dvck()">click</a><br><br><br><br>

<p>在显示的层上单击,可以由深变浅逐渐消失</p>

<br><br><br>

<p>

<>02/11/2011 16:17<> --- author:<a href="http://hi.baidu.com/bluid">bluid</a>

</p>

<br><br><br><br>

<br><br>

</div>

</body>

</html>

【javascript控制Div层透明属性由浅变深由深变浅逐渐显示】相关文章:

Javascript的IE和Firefox兼容性汇编

JavaScript中的Math.LN2属性用法详解

javascript实现点击后变换按钮显示文字的方法

Javascript实现每日自动换一张图片的方法

JavaScript获取并更改input标签name属性的方法

javascript瀑布流布局实现方法详解

javascript插件开发的一些感想和心得

用javascript制作放大镜放大图片

javascript中CheckBox全选终极方案

Javascript监视变量变化的方法

精品推荐
分类导航