jQuery遮罩层实例讲解


Posted in jQuery onMay 11, 2017

本文实例为大家分享了jQuery遮罩层展示的具体代码,供大家参考,具体内容如下

1.1 背景半透明遮罩层样式

需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:

/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

1.2 jQuery实现遮罩

/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo第一个参数为速度,第二个为透明度
  // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

1.3 提示框

遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。

/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  
  $(id).css({left: l+'px', top: t+'px'});
}

//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
车间班组长的职责
2013/12/13 职场文书
入党申请自荐书范文
2014/02/11 职场文书
道德模范事迹材料
2014/12/20 职场文书
Python中常见的导入方式总结
2021/05/06 Python
如何有效防止sql注入的方法
2021/05/25 SQL Server