jQuery遮罩层效果实例分析

前端之家收集整理的这篇文章主要介绍了jQuery遮罩层效果实例分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

先来看看示例代码

Example | xHTML1.0 Box() { 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("
"); $(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,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"); } // -->
Box">

其实遮罩层原理很简单。

一个div 遮住下面的内容。

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

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

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

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《

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

原文链接:https://www.f2er.com/jquery/50555.html

猜你在找的jQuery相关文章