编程 Javascript

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程序设计有所帮助。

- Author -

lovebread

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS判断当前日期是否大于某个日期的实现代码

Sep 02 Javascript

javascript之典型高阶函数应用介绍

Jan 10 Javascript

javascipt匹配单行和多行注释的正则表达式

Nov 20 Javascript

用unescape反编码得出汉字示例

Apr 24 Javascript

JavaScript给按钮绑定点击事件（onclick）的方法

Apr 07 Javascript

每日十条JavaScript经验技巧(二)

Jun 23 Javascript

jQuery+ajax实现修改密码验证功能实例详解

Jul 06 jQuery

vue如何进行动画的封装

Sep 26 Javascript

iview通过Dropdown(下拉菜单)实现的右键菜单

Oct 26 Javascript

Bootstrap Paginator+PageHelper实现分页效果

Dec 29 Javascript

解决layui table表单提示数据接口请求异常的问题

Sep 24 Javascript

微信小程序实现点击页面出现文字

Sep 21 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