Javascript实现div层渐隐效果的方法


Posted in Javascript onMay 30, 2015

本文实例讲述了Javascript实现div层渐隐效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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>Test Alpha</title>
<style type="text/css">
  #show {
    background:#ffff66;
    font-size:12px;
    height:200px;
    width:300px;
    left:300px;
    position:absolute;
    text-align:center;
    filter:alpha(opacity=0);
  }
</style>
</head>
<body onload={document.getElementById('show').style.opacity=0;}>
<div id="show"></div>
<button onclick=fun()>button</button>
</body>
<script>
function fun(){
  var div=document.getElementById('show');
   div.style.opacity=1;
   hidden(document.getElementById("show"),1,-0.01);
}
function hidden(o,i,s){
  t=setInterval(function(){  
  i+=s;
  o.style.opacity=i;
  if(i<0)window.clearInterval(t); 
  },1);  
};
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js+css在交互上的应用
Jul 18 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
JQuery+CSS实现图片上放置按钮的方法
May 29 #Javascript
Jquery解析json字符串及json数组的方法
May 29 #Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 #Javascript
jQuery实现返回顶部效果的方法
May 29 #Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 #Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
You might like
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php把数组值转换成键的方法
2015/07/13 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
Python 多线程的实例详解
2017/09/07 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
日期和时间问题
2015/01/04 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
《理想》教学反思
2014/02/17 职场文书
会计岗位描述
2014/02/22 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
运动会广播稿50字
2015/08/19 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB