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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
深入理解js promise chain
May 05 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
React优化子组件render的使用
May 12 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php算法实例分享
2015/07/14 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Python requests库用法实例详解
2018/08/14 Python
python实现祝福弹窗效果
2019/04/07 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python基于win32api实现键盘输入
2020/12/09 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
女大学生自我鉴定
2013/12/09 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
工会工作先进事迹
2014/08/18 职场文书
收款授权委托书
2014/10/02 职场文书
绵山导游词
2015/02/05 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript