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中map函数的两种方式
Apr 07 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现本地存储
Dec 22 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+SQLite存储方案
2010/09/04 PHP
php实现中文转数字
2016/02/18 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
php跨域调用json的例子
2013/11/13 Javascript
JS delegate与live浅析
2013/12/21 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
python删除列表内容
2015/08/04 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python lxml中etree的简单应用
2019/05/10 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
共产党员公开承诺书
2014/03/25 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
索尼ICF-5900W收音机测评
2022/04/24 无线电