jq给页面添加覆盖层遮罩的实例


Posted in Javascript onFebruary 16, 2017

先引入jq代码,然后代码如下:

$(function(){
 
 var docHeight = $(document).height(); //获取窗口高度
  
 $('body').append('<div id="overlay"></div>');
  
 $('#overlay')
  .height(docHeight)
  .css({
   'opacity': .9, //透明度
   'position': 'absolute',
   'top': 0,
   'left': 0,
   'background-color': 'black',
   'width': '100%',
   'z-index': 5000 //保证这个悬浮层位于其它内容之上
  });
   
  setTimeout(function(){$('#overlay').fadeOut('slow')}, 3000); //设置3秒后覆盖层自动淡出
});

以上这篇jq给页面添加覆盖层遮罩的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
You might like
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
php实现登录页面的简单实例
2019/09/29 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
jquery动态添加option示例
2013/12/30 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
Vue3为什么这么快
2020/09/23 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python数据可视化图实现过程详解
2020/06/12 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
高中生期末评语
2014/01/28 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
杭白菊导游词
2015/02/10 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年采购部工作总结
2015/04/23 职场文书
物业保安辞职信
2015/05/12 职场文书
委托收款证明
2015/06/23 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书