jQuery遮罩层效果实例分析


Posted in Javascript onJanuary 14, 2016

本文实例分析了jQuery遮罩层效果。分享给大家供大家参考,具体如下:

先来看看示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>
<title>Example | xHTML1.0</title>
<mce:style>
<!--  *{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
-->
</mce:style>
<style mce_bogus="1">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
</style>
<mce:script type="text/javascript">
<!--
function showBox() {
var bH = $(window).height();
var bW = $(window).width();
$("#full_box").css({width:bW,height:bH,display:"block"});
var objWH = getObjWh('dialog');
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
$("#dialog_content").html("<div style="text-align:center" mce_style="text-align:center">正在加载,请稍后...</div>");
$(window).scroll(function (){ resetBox();});
$(window).resize(function (){ resetBox();});
}
function resetBox() {
var full_box = $("#full_box").css("display");
if (full_box == 'block') {
var bH = $(window).height();
var bW = $(window).width();
var objWH = getObjWh('dialog');
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
}
}
function getObjWh(obj) {
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
var ch = $(window).height();
var cw = $(window).width();
var objH = $("#"+obj).height();
var objW = $("#"+obj).width();
var objT = Number(st) + (Number(ch) - Number(objH))/2;
var objL = Number(sl) + (Number(cw) - Number(objW))/2;
return objT +"|" +objL;
}
function closeBox() {
$("#dialog").css("display","none");
$("#full_box").css("display","none");
}
// -->
</mce:script>
<button id="click" onclick="showBox()">click</button>
<div id="full_box"></div>
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align:center;" mce_style="text-align:center;">
<a href="#" mce_href="#" onclick="closeBox();">关闭</a>
</div>
</div>
</body>
</html>

其实遮罩层原理很简单。

一个div 遮住下面的内容。

其中比较关键的一个css 样式是

x-index: 整数值

数值越大在越上层,越小就在越下层,可以是负数。

上面的js 代码有部分错误。下面已经修正。

//显示层
function showBox(id) {
    var bH = document.body.offsetHeight;//$(window).height();
    var bW = document.body.offsetWidth;//$(window).width();
    if (bH < $(window).height())
    {
      bH = $(window).height();
    }
    $("#full_box").css({width:bW,height:bH,display:"block"});
    var objWH = getObjWh('dialog');
    var tbT = objWH.split("|")[0] + "px";
    var tbL = objWH.split("|")[1] + "px";
    if(id=='template'){
      $("#div_template").show();
    }else if(id == 'history'){
      $("#div_history").show();
    }else{
      $("#tree_"+id).show();
    }
    $(window).scroll(function (){ resetBox(id);});
    $(window).resize(function (){ resetBox(id);});
}
//重置层
function resetBox(id) {
    var full_box = $("#full_box").css("display");
    if (full_box == 'block') {
      var bH = document.body.offsetHeight;//$(window).height();
      var bW = document.body.offsetWidth;//$(window).width();
      if (bH < $(window).height())
      {
        bH = $(window).height();
      }
      var objWH = getObjWh('dialog');
      var tbT = objWH.split("|")[0] + "px";
      var tbL = objWH.split("|")[1] + "px";
      $(".dialog").css({top:tbT,left:tbL});
      $("#full_box").css({width:bW,height:bH});
    }
}
//获得层参数
function getObjWh(obj) {
    var st = $(window).scrollTop();
    var sl = $(window).scrollLeft();
    var ch = $(window).height();
    var cw = $(window).width();
    var objH = $("#"+obj).height();
    var objW = $("#"+obj).width();
    var objT = Number(st) + (Number(ch) - Number(objH))/2;
    var objL = Number(sl) + (Number(cw) - Number(objW))/2;
    return objT +"|" +objL;
}
//关闭层
function closeBox(id) {
    if(id == 'template'){
       $("#div_template").hide();
    }else if(id == 'history'){
      $("#div_history").hide();
    }else{
      $("#tree_"+id).hide();
    }
    $("#full_box").hide();
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 #Javascript
jQuery div拖拽用法实例
Jan 14 #Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 #Javascript
分享jQuery插件的学习笔记
Jan 14 #Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 #Javascript
You might like
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python实现高斯判别分析算法的例子
2019/12/09 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
信用社实习人员自我鉴定
2013/09/20 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
新春联欢会主持词
2014/03/24 职场文书
周年庆典主持词
2014/04/02 职场文书
团干部培训方案
2014/06/03 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
居安思危观后感
2015/06/11 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技