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 相关文章推荐
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
vue 授权获取微信openId操作
Nov 13 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 模拟POST提交的2种方法详解
2013/06/17 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python编写简单爬虫资料汇总
2016/03/22 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
为什么是 Python -m
2020/06/19 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
python IP地址转整数
2020/11/20 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
员工工作表扬信范文
2014/01/13 职场文书
个人自我剖析材料
2014/09/30 职场文书
优秀团支部申报材料
2014/12/26 职场文书
先进工作者个人总结
2015/02/15 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
公历12个月名称的由来
2022/04/12 杂记
Redis+AOP+自定义注解实现限流
2022/06/28 Redis