HTML控件变透明,javascript控制Div层透明属性由浅变深由深变浅逐渐显示

该博客介绍了如何使用JavaScript实现Div层的透明度由浅变深逐渐显示和由深变浅逐渐消失的效果。代码适用于IE6、7、8以及Firefox和Chrome等浏览器。通过创建和操作Div元素,结合filter和opacity属性,实现了跨浏览器的透明度动画效果。点击显示层后,再次点击层会逐渐消失。作者为bluid,发表于2011年02月11日16:17。
摘要由CSDN通过智能技术生成

搬运的留着以后自己看!

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

代码支持IE6、7、8/firefox/Chrome浏览器

javascript控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失

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='i.jpg';

div.innerHTML='

div层显示的内容,author:bluid关闭

';

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,'-');

}

}

javascript控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失.

单击'click'显示层,由浅变深逐渐显示

click

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

02/11/2011 16:17 --- author:bluid

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值