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代码
May 19 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
JS实现json数组排序操作实例分析
Oct 28 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合并两个数组的两种方式的异同
2012/09/14 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP函数积累总结
2019/03/19 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
基于jquery的跨域调用文件
2010/11/19 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
理解javascript async的用法
2017/08/22 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
教育科学研究生自荐信
2013/10/09 职场文书
家长会演讲稿范文
2014/01/10 职场文书
求职自荐信的格式
2014/04/07 职场文书
大学生就业求职信
2014/06/12 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL