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获取网页中的js、css、Flash等文件
Dec 20 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
javascript 产生随机数的几种方法总结
Sep 26 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jquery处理json对象
2014/11/03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python交互式图形编程实例(一)
2017/11/17 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
实习生的自我评价
2014/01/08 职场文书
酒店led欢迎词
2014/01/09 职场文书
英语道歉信范文
2014/01/09 职场文书
财产保全担保书范文
2014/04/01 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
模具专业求职信
2014/06/26 职场文书
标准版离职证明书
2014/09/12 职场文书
工会工作个人总结
2015/03/03 职场文书
放假通知怎么写
2015/08/18 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python