javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
大家在網(wǎng)頁(yè)上注冊(cè)登錄的時(shí)候,經(jīng)常會(huì)看見(jiàn)彈出的遮罩層。
我這里實(shí)現(xiàn)的效果是:點(diǎn)擊按鈕彈出遮罩層,遮罩層下的內(nèi)容不可選,并且登錄框隨著鼠標(biāo)滾輪的下滑,動(dòng)態(tài)的浮動(dòng)到頁(yè)面某個(gè)位置,點(diǎn)擊關(guān)閉按鈕關(guān)閉遮罩層。
這是鼠標(biāo)滾動(dòng)下滑到頁(yè)面中間某部分時(shí)畫(huà)面。雖然界面簡(jiǎn)單顏色隨意,能看出效果才是最重要的哈哈哈哈。
以下是html界面:
<body> <!-- 主界面 --> <div class="main"> <div onclick="show()">登錄</div> </div> <!-- 設(shè)置遮罩層的div --> <div id="shade"></div> <!-- 設(shè)置登錄框 --> <div id="loginBox"> <div onclick="close()">關(guān)閉</div> </div> </body>
樣式表:
*{padding:0px;margin:0px;} .main{ width:100%; height:3000px; } #shade{ position:absolute;//絕對(duì)定位在頁(yè)面左上角 top:0px; left:0px; z-index:1000; display:none; width:100%; height:100%; background:yellow; opacity:0.3; } #loginBox{ position:absolute; top:260px; left:30%; z-index:2000; display:none; width:400px; height:200px; background:red; border:1px solid red; }
js代碼部分:
<script type="text/javascript"> window.onload=function(){ window.onscroll=function(){ //動(dòng)態(tài)設(shè)置遮罩層的寬高與屏幕可見(jiàn)寬高一致,實(shí)現(xiàn)被遮罩頁(yè)面的全覆蓋 document.getElementById("shade").style.width=document.body.clientWidth+"px"; document.getElementById("shade").style.height=document.body.clientHeight+"px"; //兼容谷歌 和 ie/firefox不同瀏覽器,獲取滾動(dòng)條到瀏覽器頂部的位置 var h=document.body.scrollTop + document.documentElement.scrollTop; //用定時(shí)器實(shí)現(xiàn)下滑頁(yè)面時(shí),登錄框延遲從頂部下滑到指定位置 setTimeout(function(){ //設(shè)置登錄框始終在界面距離頂部260px的位置,因?yàn)閟tyle.top獲取的值是數(shù)值,不帶單位,所以在表達(dá)式最后人為添加單位 document.getElementById("loginBox").style.top=260 + h +"px"; },200); } } //遮罩層與登錄框彈出事件 function show(){ document.getElementById("shade").style.display = "block"; document.getElementById("loginBox").style.display = "block"; } //遮罩層與登錄框隱藏事件 function close(){ document.getElementById("shade").style.display = "none"; document.getElementById("loginBox").style.display = "none"; } </script>
以上就是啦~
以上所述是小編給大家介紹的javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript中加號(hào)(+)操作符的一些神奇作用
這篇文章主要介紹了javascript中加號(hào)(+)操作符的一些神奇作用,真的很神奇,例如加號(hào)可以轉(zhuǎn)換數(shù)據(jù)類(lèi)型,可以把日期轉(zhuǎn)成整數(shù)等,需要的朋友可以參考下2014-06-06javascript閉包的高級(jí)使用方法實(shí)例
這篇文章介紹了javascript閉包的高級(jí)使用方法實(shí)例,有需要的朋友可以參考一下2013-07-07JS實(shí)現(xiàn)元素上下左右移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)元素上下左右移動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10javascript css styleFloat和cssFloat
在寫(xiě)js操作css的過(guò)程中發(fā)現(xiàn)float屬性在IE和firefox下對(duì)應(yīng)的js腳本是不一樣的,IE下對(duì)應(yīng)得是 styleFloat,firefox,chorme,safari下對(duì)應(yīng)的是cssFloat,可用in運(yùn)算符去檢測(cè)style是否包含此屬性。2010-03-03js位運(yùn)算在實(shí)際中使用的實(shí)例教程
我們可能很少在編程中用位運(yùn)算,如果沒(méi)深入學(xué)習(xí),可能也很難理解,下面這篇文章主要給大家介紹了關(guān)于js位運(yùn)算在實(shí)際中使用的相關(guān)資料,需要的朋友可以參考下2022-03-03js點(diǎn)擊返回跳轉(zhuǎn)到指定頁(yè)面實(shí)現(xiàn)過(guò)程
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊返回跳轉(zhuǎn)到指定頁(yè)面實(shí)現(xiàn)過(guò)程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04模仿JQuery sortable效果 代碼有錯(cuò)但值得看看
模仿JQuery sortable效果 代碼有錯(cuò)但值得看看,因?yàn)闀r(shí)間關(guān)系,需要的朋友可以參考下。2009-11-11