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 相关文章推荐
JQuery live函数
Dec 24 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
javascript解析json实例详解
Nov 05 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
angular的输入和输出的使用方法
Sep 22 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
url decode problem 解决方法
2011/12/26 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python类继承用法实例分析
2015/05/27 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python实现词法分析器
2019/01/31 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python实现最速下降法
2020/03/24 Python
Python基于template实现字符串替换
2020/11/27 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
高中教师评语大全
2014/04/25 职场文书
企业委托书范本
2014/09/13 职场文书
学校百日安全活动总结
2015/05/07 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
python对文档中元素删除,替换操作
2022/04/02 Python