您好,登錄后才能下訂單哦!
今天小編給大家分享的是js實(shí)現(xiàn)蒙版效果的思路與方法,很多人都不太了解,今天小編為了讓大家更加了解js實(shí)現(xiàn)蒙版效果的思路與方法,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會(huì)有所收獲的哦。
我們來分析一下思路:
1、監(jiān)聽按鈕的點(diǎn)擊
2、阻止冒泡(最關(guān)鍵的一點(diǎn))
3、讓隱藏的顯示出來
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)聽事件的點(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)出來 $("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顯示的隱藏出來 $("box").style.display = "none"; $("panel").style.display = "none"; //1.2顯示滾動(dòng)條 document.body.style.overflow = "auto"; }else{ window.location.href = "http://www.baidu.com"; } } } </script>
最為重要的一點(diǎn)是要阻止事件冒泡。
獲取對(duì)象的id:
var tranId = e.target ? e.target.id : e.srcElement.id;
關(guān)于js實(shí)現(xiàn)蒙版效果的思路與方法就分享到這里了,當(dāng)然并不止以上和大家分析的辦法,不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。