js控制淡入淡出示例代码


Posted in Javascript onNovember 12, 2013

相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键。

<!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=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
body {margin:0;padding:0;color:#000000;} 
#div_test { 
width: 100%; 
height: 100%; 
background-color: #000000; 
position:absolute; 
filter:Alpha(Opacity=0) 
} 
</style> 
<script type="text/javascript"> 
var i = 100; 
function $(id) {return document.getElementById(id);} 
function chang_display() { i--; 
var div = $('div_test'); 
div.style.filter = "Alpha(Opacity="+i+")"; 
div.style.opacity = i / 100; 
if ( i== "0") 
{document.getElementById('div_test').style.display="none";//隐藏 
exit 
} } 
/*控制div隐藏*/ 
function hid() { 
setInterval(chang_display, 1); 
} 
</script> 
</head> 
<body> 
<div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div> 
<div><a href="http://bbs.csdn.com">123</a>123123</div> 
</body> 
<script defer="defer"> 
var j = 0; 
function $(id) {return document.getElementById(id);} 
function turn_display() 
{ j++; 
var div = $('div_test'); 
div.style.filter = "Alpha(Opacity="+j+")"; 
div.style.opacity = j / 100; 
if ( j== "0") 
{document.getElementById('div_test').style.display="none";//隐藏 
exit 
} 
} 
setInterval(turn_display, 1); 
</script> 
</html>
Javascript 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery给图片添加鼠标经过时的边框效果
Nov 12 #Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 #Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
jquery 模板的应用示例
Nov 12 #Javascript
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
python中的多线程实例教程
2014/08/27 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
使用python实现knn算法
2017/12/20 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python实现简单的文字识别
2018/11/27 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
实习心得体会
2014/01/02 职场文书
企业项目策划书
2014/01/11 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
八年级英语教学计划
2015/01/23 职场文书
汉语拼音教学反思
2016/02/22 职场文书