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命名冲突解决的五种方案分享
Mar 16 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
详解jquery选择器的原理
Aug 01 jQuery
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
原生JS实现烟花效果
Mar 10 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
js仿360开机效果
2019/12/26 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python交换两个变量的值方法
2019/01/12 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
接口可以包含哪些成员
2012/09/30 面试题
技术副厂长岗位职责
2013/12/26 职场文书
留学顾问岗位职责
2014/04/14 职场文书
关键在于落实心得体会
2014/09/03 职场文书
承诺书范本
2015/01/21 职场文书
店铺转让协议书
2015/01/29 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers