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 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
xml转json的js代码
Aug 28 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
关于JS中prototype的理解
Sep 07 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
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
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php中return的用法实例分析
2015/02/28 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python实现从web抓取文档的方法
2014/09/26 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
电气技术员岗位职责
2013/11/19 职场文书
淘宝好评语大全
2014/05/05 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python