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 相关文章推荐
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
Vue列表页渲染优化详解
Jul 24 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
javascript回到顶部特效
2016/07/30 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
采购主管工作职责
2013/12/12 职场文书
创业计划书六个要素
2013/12/26 职场文书
开业庆典答谢词
2014/01/18 职场文书
初中英语教学反思
2014/01/25 职场文书
承诺书范本
2015/01/21 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python