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 相关文章推荐
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
微信小程序实现刷脸登录
2018/05/25 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python时间日期操作方法实例小结
2020/02/06 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
数控机床专业自荐信
2014/05/19 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers