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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 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
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Python内置函数property()如何使用
2020/09/01 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
护士的岗位职责
2013/12/04 职场文书
药店主任岗位责任制
2014/02/10 职场文书
投资合作协议书范本
2014/04/17 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
趣味运动会简讯
2015/07/20 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
MySQL 数据类型详情
2021/11/11 MySQL