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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
js切换div css注意的细节
Dec 10 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
基于vue的video播放器的实现示例
Feb 19 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php 动态添加记录
2009/03/10 PHP
php adodb分页实现代码
2009/03/19 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
理解javascript闭包
2015/12/15 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
node.js实现快速截图
2016/08/27 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
keras中的backend.clip用法
2020/05/22 Python
python 利用zmail库发送邮件
2020/09/11 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
解除合同协议书
2014/04/17 职场文书
国庆促销活动总结
2014/08/29 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
感恩教育主题班会
2015/08/12 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL