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 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
Laravel下生成验证码的类
2017/11/15 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
js如何编写简单的ajax方法库
2017/08/02 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
环保公益广告语
2014/03/13 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
民主生活会汇报材料
2014/12/15 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
Python 正则模块详情
2021/11/02 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏