快捷導(dǎo)航

js實(shí)現(xiàn)蒙版效果

更新時(shí)間：2020年01月11日 10:07:05 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了比較常見(jiàn)的js蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)蒙版效果展示的具體代碼，供大家參考，具體內(nèi)容如下

思路

1.監(jiān)聽(tīng)按鈕的點(diǎn)擊
2.阻止冒泡（最關(guān)鍵的一點(diǎn)）
3.讓隱藏的顯示出來(lái)
4.隱藏滾動(dòng)條
5.點(diǎn)擊文檔：獲取點(diǎn)擊的標(biāo)簽
判斷：讓顯示的都隱藏
顯示滾動(dòng)條

<style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width:100%;
      height:100%;
    }
    #panel{
      width:100%;
      height:2000px;
      background-color:#000;
      opacity: 0.4;  //透明度
      filter: alpha(opacity： 40);  //用于兼容IE瀏覽器
      position: absolute;
      top:0;
      left:0;
      display: none;
    }
    #box{
      width:300px;
      height:300px;
      background-color: #fff;
      position: absolute;
      top:50%;
      left:50%;
      margin-left:-150px;
      margin-top:-150px;
      display: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button id="btn">登錄</button>
  <div id="panel"></div>
  <div id="box"></div>
  <script src="js/myFunc.js"></script>
  <script>
    window.onload = function (){
      //1.監(jiān)聽(tīng)事件的點(diǎn)擊
      btn.onclick = function (event){

        //1.0 阻止冒泡
        if(event && event.stopPropagation){ //W3c標(biāo)準(zhǔn)
         event.stopPropagation();
        }else{ //IEx系列 IE 678
         event.cancelBubble = ture;
        }
        //1.1隱藏的顯現(xiàn)出來(lái)
        $("box").style.display = "block";
        $("panel").style.display = "block";
        //1.2隱藏滾動(dòng)條
        document.body.style.overflow = "hidden";
      }
      //2.點(diǎn)擊文檔
      document.onclick = function (event){
        var e = event || window.event;
        //2.1獲取點(diǎn)擊的標(biāo)簽
        var tranId = e.target ? e.target.id : e.srcElement.id;  //target:獲取當(dāng)前操作對(duì)象
        //2.2判斷
        if(tranId !== "box"){
          //1.1顯示的隱藏出來(lái)
          $("box").style.display = "none";
          $("panel").style.display = "none";
          //1.2顯示滾動(dòng)條
          document.body.style.overflow = "auto";
        }else{
          window.location.;
        }

      }
    }
</script>

最為重要的一點(diǎn)是要阻止事件冒泡
獲取對(duì)象的id： var tranId = e.target ? e.target.id : e.srcElement.id;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
蒙版

相關(guān)文章

openlayers4實(shí)現(xiàn)點(diǎn)動(dòng)態(tài)擴(kuò)散
這篇文章主要為大家詳細(xì)介紹了openlayers4實(shí)現(xiàn)的點(diǎn)動(dòng)態(tài)擴(kuò)散，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
javascript實(shí)現(xiàn)的登陸遮罩效果匯總
小編給大家推薦幾款使用Javascript實(shí)現(xiàn)的遮罩效果登陸框，其實(shí)這種效果是很常見(jiàn)的，在許多互動(dòng)的社區(qū)及其它的一些地方，彈出框應(yīng)用想當(dāng)流行，在不妨礙網(wǎng)頁(yè)運(yùn)行的情況下，用戶(hù)可以輸入登錄信息，實(shí)現(xiàn)完美登錄。
2015-11-11
JavaScript中for-in和for-of的不同之處及如何正確使用
這篇文章主要給大家介紹了關(guān)于JavaScript中for-in和for-of的不同之處及如何正確使用它們的相關(guān)資料,無(wú)論是for...in還是for...of語(yǔ)句都是迭代一些東西,它們之間的主要區(qū)別在于它們的迭代方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
JS實(shí)現(xiàn)獲取GIF總幀數(shù)的方法詳解
如何通過(guò)js在上傳前就拿到它的總幀數(shù)來(lái)判斷呢？本文就跟大家分享一種解決方案，并將其封裝成插件發(fā)布至npm倉(cāng)庫(kù)，快跟隨小編一起學(xué)習(xí)一下吧
2022-05-05
js變量以及其作用域詳解
Javascript和Java、C這些語(yǔ)言不同，它是一種無(wú)類(lèi)型、弱檢測(cè)的語(yǔ)言。它對(duì)變量的定義并不需要聲明變量類(lèi)型，我們只要通過(guò)賦值的形式，可以將各種類(lèi)型的數(shù)據(jù)賦值給同一個(gè)變量
2012-01-01
圖片img的src不變讓瀏覽器重新加載實(shí)現(xiàn)方法
圖片img的src不變,想讓瀏覽器重新加載怎么辦,在圖片地址src不變的情況下讓瀏覽器重新加載圖片,實(shí)際上在src不變時(shí)，瀏覽器直接就去讀取緩存
2013-03-03
firefox瀏覽器下javascript 拖動(dòng)層效果與原理分析代碼
這篇文章主要給大家介紹了關(guān)于在firefox瀏覽器下如何利用javascript實(shí)現(xiàn)拖動(dòng)層效果，以及其中的原理分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，下面來(lái)一起看看吧
2007-12-12
Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別，ajax和jsonp的區(qū)別
這篇文章主要介紹了Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別，ajax和jsonp的區(qū)別的相關(guān)資料,需要的朋友可以參考下
2015-12-12
創(chuàng)建、調(diào)用JavaScript對(duì)象的方法集錦
這篇文章主要介紹了創(chuàng)建、調(diào)用JavaScript對(duì)象的方法集錦,需要的朋友可以參考下
2014-12-12
JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽(tīng)方法集錦
這篇文章主要介紹了JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽(tīng)方法,總結(jié)整理了幾種常用的瀏覽器關(guān)閉事件監(jiān)聽(tīng)方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-06-06