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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
详解vue组件基础
May 04 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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 foreach循环使用详解与实例代码
2010/05/08 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
简约JS日历控件 实例代码
2013/07/12 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python脚本内运行linux命令的方法
2015/07/02 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
scrapy爬虫实例分享
2017/12/28 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
J2EE相关知识面试题
2013/08/26 面试题
元旦晚会主持词
2014/03/24 职场文书
有关爱国演讲稿
2014/05/07 职场文书
环保建议书300字
2014/05/14 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
导游词之千岛湖
2019/09/23 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫