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


Posted in Javascript onNovember 12, 2013

搬运的留着以后自己看!

复制下面蓝色的代码保存为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" onclick="cleand(\''+idstr+'\')" />'; 
div.innerHTML='<p style="color:#fff;text-align:center;">div层显示的内容,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">关闭</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控制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> 
<!-- #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>
Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
jquery 模板的应用示例
Nov 12 #Javascript
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
You might like
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python实现连接mongodb的方法
2015/05/08 Python
详解Swift中属性的声明与作用
2016/06/30 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
pygame实现弹球游戏
2020/04/14 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
求网格中的黑点分布
2013/11/06 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
CSS的calc函数用法小结
2022/06/25 HTML / CSS