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 相关文章推荐
文本加密解密
Jun 23 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
vue 中固定导航栏的实例代码
Nov 01 Javascript
微信小程序实现点赞业务
Feb 10 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
php强制更新图片缓存的方法
2015/02/11 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
jquery 插件学习(五)
2012/08/06 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python对视频画框标记后保存的方法
2018/12/07 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
实习自我鉴定范文
2013/10/30 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
感恩寄语大全
2014/04/11 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
向女朋友道歉的话
2015/01/20 职场文书
音乐课外活动总结
2015/05/09 职场文书
《实心球》教学反思
2016/02/23 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
python3 字符串str和bytes相互转换
2022/03/23 Python