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实现的自定义的对话框的实现代码
Mar 21 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
浅谈js的异步执行
2016/10/18 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
工厂会计员职责
2014/02/06 职场文书
学历公证委托书
2014/04/09 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
工地质量标语
2014/06/12 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
先进工作者申报材料
2014/12/23 职场文书
中学生逃课检讨书
2015/02/17 职场文书
离婚纠纷代理词
2015/05/23 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技