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入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
第一篇初识bootstrap
Jun 21 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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+MSSQL分页的例子
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python 字典操作提取key,value的方法
2019/06/26 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
竞赛口号大全
2014/06/16 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
新员工辞职信范文
2015/05/12 职场文书
2015年女职工工作总结
2015/05/15 职场文书
商务信函英语问候语
2015/11/10 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python