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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
Node.js操作系统OS模块用法分析
Jan 04 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php实现递归与无限分类的方法
2015/02/16 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
php生成二维码
2015/08/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python 如何将office文件转换为PDF
2020/09/22 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Linux机考试题
2015/07/17 面试题
护士自我评价
2014/02/01 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
学生检讨书
2015/01/27 职场文书
培训通知书模板
2015/04/17 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Hive常用日期格式转换语法
2022/06/25 数据库