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 相关文章推荐
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Bootstrap基础学习
Jun 16 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php异常处理捕获错误整理
2019/09/23 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python 字符串换行的多种方式
2018/09/06 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python continue语句实例用法
2020/02/06 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
学生出入校管理制度
2014/01/16 职场文书
安全先进个人材料
2014/12/29 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python