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 触发事件列表 比较不错
Sep 03 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
Javascript验证方法大全
Sep 21 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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源码之 ext/mysql扩展部分
2009/07/17 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
九年级物理教学反思
2014/01/29 职场文书
大学生赌博检讨书
2014/09/22 职场文书
离婚民事起诉状
2015/08/03 职场文书
数学复习课教学反思
2016/02/18 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技