jQuery遮罩層效果實(shí)例分析
本文實(shí)例分析了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();">關(guān)閉</a> </div> </div> </body> </html>
其實(shí)遮罩層原理很簡單。
一個(gè)div 遮住下面的內(nèi)容。
其中比較關(guān)鍵的一個(gè)css 樣式是
x-index: 整數(shù)值
數(shù)值越大在越上層,越小就在越下層,可以是負(fù)數(shù)。
上面的js 代碼有部分錯(cuò)誤。下面已經(jīng)修正。
//顯示層 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}); } } //獲得層參數(shù) 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; } //關(guān)閉層 function closeBox(id) { if(id == 'template'){ $("#div_template").hide(); }else if(id == 'history'){ $("#div_history").hide(); }else{ $("#tree_"+id).hide(); } $("#full_box").hide(); }
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
用jquery實(shí)現(xiàn)點(diǎn)擊欄目背景色改變
用jquery如何實(shí)現(xiàn)點(diǎn)擊一欄目實(shí)現(xiàn)欄目變色,再點(diǎn)擊另一欄目也變色,但原來的變回原色,本文提供解決方法,需要了解的朋友可以參考下2012-12-12jquery 頁面滾動(dòng)到底部自動(dòng)加載插件集合
很多社交網(wǎng)站都使用無限滾動(dòng)的翻頁技術(shù)來提高用戶體驗(yàn),當(dāng)你頁面滑到列表底部時(shí)候無需點(diǎn)擊就自動(dòng)加載更多的內(nèi)容2014-01-01jQuery使用$.get()方法從服務(wù)器文件載入數(shù)據(jù)實(shí)例
這篇文章主要介紹了jQuery使用$.get()方法從服務(wù)器文件載入數(shù)據(jù),較為簡單的分析了jQuery中g(shù)et方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)簡單彈出框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)簡單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實(shí)很好用,有很多需求都是要彈出框,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06jQuery中的Deferred和promise 的區(qū)別
這篇文章主要介紹了jQuery中的Deferred和promise 的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-04-04