contoh kesan lapisan topeng jQuery analysis

Rumah

hujung hadapan web

tutorial js

contoh kesan lapisan topeng jQuery analysis_jquery

May 16, 2016 pm 03:19 PM

jquery lapisan topeng

Artikel ini menganalisis kesan lapisan topeng jQuery melalui contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat kod sampel dahulu:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"&gt;&lt;/mce:script&gt;
&lt;title&gt;Example | xHTML1.0&lt;/title&gt;
&lt;mce:style&gt;
&lt;!--  *{
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;
}
--&gt;
&lt;/mce:style&gt;
&lt;style mce_bogus="1"&gt;
*{
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;
}
&lt;/style&gt;
&lt;mce:script type="text/javascript"&gt;
&lt;!--
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("&lt;div style="text-align:center" mce_style="text-align:center"&gt;正在加载，请稍后...&lt;/div&gt;");
$(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");
}
// --&gt;
&lt;/mce:script&gt;
&lt;button id="click" onclick="showBox()"&gt;click&lt;/button&gt;
&lt;div id="full_box"&gt;&lt;/div&gt;
&lt;div id="dialog"&gt;
&lt;div id="dialog_content"&gt;&lt;/div&gt;
&lt;div style="text-align:center;" mce_style="text-align:center;"&gt;
&lt;a href="#" mce_href="#" onclick="closeBox();"&gt;关闭&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Sebenarnya, prinsip lapisan topeng adalah sangat mudah.

Div merangkumi kandungan di bawah.

Salah satu gaya css yang lebih kritikal ialah

indeks x: nilai integer

Semakin besar nilai, semakin tinggi, semakin kecil nilainya, semakin rendah ia boleh menjadi nombor negatif.

Kod js di atas mempunyai beberapa ralat. Perkara berikut telah diperbetulkan.

//显示层
function showBox(id) {
    var bH = document.body.offsetHeight;//$(window).height();
    var bW = document.body.offsetWidth;//$(window).width();
    if (bH &lt; $(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 &lt; $(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();
}

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas tapak ini: "Ringkasan kesan khas klasik biasa dalam jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn