抽奖小程序在线_jQuery遮罩层实例说明

发布时间:2021-01-12 11:22 作者:jianzhan

摘要: jQuery蒙版层案例解读 本文关键为大伙儿详尽详细介绍了jQuery蒙版层案例,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下文中案例为大伙儿共享了jQuery蒙版层展现

jQuery遮罩层实例讲解       这篇文章主要为大家详细介绍了jQuery遮罩层实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;

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

  • 安卓有哪些好用的照相软

    图组预警信息信息内容。作为一个平时p图能搞三十分鐘乐在这其中的妹子来说,最开始全家人人福先走一走过来ପ( ˘ᵕ˘ ) ੭ ☆(大多数数数都是用于人像图片照片psps修图等),恰当

  • 还在PS里手动描边?AI自动

    机器设备的心报道,报名参加:路雪、王淑婷。昨日,byteq 开发设计设计方案工作中工作人员 Benjamin Groessing 在 twitter 上发布了一款依据 PythonPython、Ruby 的深层次学习培训学习培训专用型

  • PS实例教程:人像图片转工

    模拟题目:PS案例实例教程:人像图片照片转工笔画画画本来那麼简单,从零教你打造出出古典美!(含训炼素材图片照片) 工笔画画画具体实际效果是很多同学们们都很钟爱的一种造

  • 如何看待朋友P图P得很“过

    第一次提出问题 有点儿兴奋 ——— 我朋友便是也很喜爱穿着打扮 但她P图一直P得非常“古怪”(本人观点) 她五官挺不错的 但并不是偏瘦的女生子 是那类瘦在脸部肥在的身上的女生

  • 如何在线制作gif图片?(

    近期想干个gif线上制作的网站,因此科学研究下了imagemagick和graphicsmagick制作gif照片 站早已作出来啦:有兴趣爱好的朋友能够首先看看 \u003Ca href=\