ホームページ > 記事 > ウェブフロントエンド > jQuery マスク レイヤー効果の例分析_jquery
jQuery マスク レイヤー効果の例分析_jquery
- WBOYオリジナル
- 2016-05-16 15:19:591006ブラウズ
この記事では、例を通じて 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 スタイルの 1 つは
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 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery における一般的な古典的な特殊効果の概要」
をチェックしてください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。