JS實作下拉選單登入註冊彈窗
這次帶給大家JS實作下拉選單登入註冊彈窗，JS實作下拉選單登入註冊彈窗的注意事項有哪些，下面就是實戰案例，一起來看一下。
下拉選單清單
<style>
*{
margin: 0px;
padding: 0px;
}
.menu{
width: 1100px;
height: 30px;
background-image: url(img/魅力罗兰Music炫图18.jpg);
margin-left: 200px;
margin-top: 50px;
}
.btn{
width: 183.3px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
font-size: 14px;
position: relative;
overflow: hidden;
transition: 0.5s;
}
.btn:hover{
cursor: pointer;
background-color: burlywood;
color: white;
max-height: 200px;
overflow: visible;
}
.btn ul{
list-style: none;
background-color: #008000;
}
</style>
<body>
<p class="menu">
<p class="btn">罗兰首页</p>
<p class="btn">歌曲专栏
<ul>
<li>流行</li>
<li>摇滚</li>
<li>蓝调</li>
<li>民谣</li>
</ul>
</p>
<p class="btn">音乐人专栏
<ul>
<li>内地</li>
<li>欧美</li>
<li>日韩</li>
<li>港台</li>
</ul>
</p>
<p class="btn">乐器专栏
<ul>
<li>钢琴</li>
<li>小提琴</li>
<li>吉他</li>
<li>架子鼓</li>
</ul>
</p>
<p class="btn">戏曲专栏
<ul>
<li>京剧</li>
<li>话剧</li>
<li>豫剧</li>
<li>黄梅戏</li>
</ul>
</p>
<p class="btn">魅力ROLAND体验区
<ul>
<li>新曲</li>
<li>唱片</li>
<li>MV</li>
</ul>
</p>
</p>
</body>登入註冊效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.login {
width: 100px;
height: 30px;
font-size: 25px;
line-height: 30px;
border: 1px solid black;
text-align: center;
background-color: darkcyan;
color: white;
}
.login:hover {
cursor: pointer;
background-color: greenyellow;
}
.mask {
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
z-index: 90;
}
.log-p {
width: 500px;
height: 300px;
background-color: white;
position: fixed;
z-index: 99;
}
</style>
</head>
<body>
<p class="mask" hidden></p>
<p class="log-p" hidden="hidden"></p>
<p class="login">登 录</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
</body>
</html>
<script>
var mask = document.getElementsByClassName("mask")[0];
var login = document.getElementsByClassName("log-p")[0];
var btn = document.getElementsByClassName("login")[0];
var clientWidth = document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight;
login.style.left = clientWidth / 2 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "px";
mask.style.height = document.body.clientHeight + "px";
window.onresize = function() {
var clientWidth = document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight;
login.style.left = clientWidth / 2 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "px";
}
btn.onclick = function(){
mask.removeAttribute("hidden");
login.removeAttribute("hidden");
}
mask.onclick = function(){
mask.setAttribute("hidden","");
login.setAttribute("hidden","hidden");
}
</script>對相關方面進行閱讀之前閱讀它有關了更多內容？ ！
推薦閱讀：
JS實作評價星級js實作圖片勻速淡入淡出以上是JS實作下拉選單登入註冊彈窗的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小紅書怎麼註冊多個帳號？註冊多個帳號會被發現嗎？
Mar 25, 2024 am 09:41 AM
小紅書作為一個集社交和電商於一身的平台，吸引了越來越多的用戶加入。有些用戶希望能夠註冊多個帳號以便更好地體驗和小紅書互動。那麼，小紅書要怎麼註冊多個帳號呢？一、小紅書怎麼註冊多個帳號？ 1.使用不同手機號碼註冊目前，小紅書主要採用手機號碼註冊帳號的方式。用戶有時會嘗試購買多個手機號碼卡，並利用它們註冊多個小紅書帳號。但這種做法有一些限制，因為購買多個手機號碼卡比較麻煩且成本較高。 2.使用信箱註冊除了手機號碼，信箱也可以用來註冊小紅書帳號。使用者可以準備多個郵箱地址，然後分別用這些郵箱地址註冊帳號。不過
漫蛙漫畫帳號怎麼註冊
Feb 28, 2024 am 08:00 AM
在漫蛙漫畫平台上，有著豐富的漫畫資源，等待大家探索。只要輕鬆進入漫蛙漫畫的官方平台，就能享受各類精彩的漫畫作品。每個小夥伴都能依照自己的喜好，輕鬆找到心儀的漫畫進行閱讀。那麼究竟該如何註冊漫蛙漫畫的官方帳號呢，本站小編就將為大家帶來這篇詳細的教程攻略，希望能幫助到各位有需要的小伙伴們。漫蛙漫畫-官方入口：https://fuw11.cc/mw666漫蛙漫畫app下載地址：https://www.siemens-home.cn/soft/74440.html漫蛙漫畫非大陸地區入口：https: /
怎麼查手機號碼註冊了哪些東西「詳細講解：手機號碼註冊的APP查詢方法」
Feb 07, 2024 am 08:24 AM
不知道大家有沒有這樣一種經歷，手機經常會收到莫名其妙的一些短信，或者是一些網站的註冊信息或者其他的一些驗證信息，實際上可能我們的手機號綁定了很多陌生的網站，我們自己都不知情，那麼今天給大家分享的是教你如何一鍵解除所有陌生的網站綁定。步驟一、打開碼號服務平台這個技巧非常實用。操作步驟如下：開啟微信，點選搜尋框的加號圖標，選擇新增朋友，然後輸入碼號服務平台進行搜尋。我們可以看到有碼號服務平台，當然它是屬於事業單位，是國家信通院推出的，可以幫助大家一鍵解除手機號碼綁定資訊。步驟二、查詢手機是否被標記我
怎麼註冊小紅書帳號？註冊小紅書帳號需要什麼？
Mar 22, 2024 am 10:16 AM
小紅書，一個集生活、娛樂、購物、分享於一體的社交平台，已成為許多年輕人日常生活中不可或缺的一部分。那麼，如何註冊小紅書帳號呢？一、怎麼註冊小紅書帳號？ 1.開啟小紅書官網或下載小紅書APP。點擊下方的「註冊」按鈕，您可以選擇不同的註冊方式。目前，小紅書支援手機號碼、信箱以及第三方帳號（如微信、QQ、微博等）進行註冊。 3.填寫相關資料。根據選擇的註冊方式，填寫相應的手機號碼、郵箱或第三方帳號資訊。 4.設定密碼。設定一個強壯的密碼，確保帳號安全。 5.完成驗證。根據提示完成手機驗證或信箱驗證。 6.完善個人
怎麼註冊163信箱
Feb 14, 2024 am 09:20 AM
有的用戶想要使用163郵箱的時候發現自己沒有帳號，那麼這個時候就需要註冊一個帳號了要怎麼操作呢？現在就來看看小編帶來的163郵箱註冊方法吧。 1.先在瀏覽器中搜尋163郵箱官網後在頁面中點選【註冊新帳號】;2、然後選擇【免費信箱】也可以選擇【VIP信箱】;3、最後選擇好之後填寫資料後點選【立即註冊】即可;
小紅書帳號怎麼註冊？它的帳號異常怎麼恢復？
Mar 21, 2024 pm 04:57 PM
小紅書作為全球最受歡迎的生活方式分享平台之一，吸引了大量用戶關注。那麼，如何註冊小紅書帳號呢？本文將為您詳細介紹小紅書帳號的註冊流程，並解答小紅書帳號異常如何復原的問題。一、小紅書帳號怎麼註冊？ 1.下載小紅書APP：在手機應用程式商店搜尋並下載小紅書APP，安裝完成後開啟。 2.註冊帳號：開啟小紅書APP後，點選首頁右下角的「我」按鈕，然後選擇「註冊」。 3.填寫註冊資料：依照指示填寫手機號碼、設定密碼、驗證碼等註冊資料。 4.完善個人資料：註冊成功後，根據指示完善個人資料，如姓名、性別、生日等。 5.設定
WPS表格下拉選單怎麼做
Mar 21, 2024 pm 01:31 PM
WPS表格下拉選單怎麼做：選中要設定下拉選單的儲存格後，依序點擊“資料”，“有效性”，再在彈出的對話框中進行對應設定後，以此來下拉我們的選單。 WPS作為一款功能強大的辦公室軟體，其本身擁有的能夠編輯文件、統計數據表格等的功能，為許多需要和文字、數據等打交道的人們提供了很多的便利。而要熟練地運用WPS軟體為我們提供很多方便，就需要我們能夠先掌握住WPS軟體的各種非常基本的操作，在這篇文章裡，小編就給大家分享一下怎麼在用WPS軟體做在出的WPS表格中進行下拉式選單的操作。開啟WPS表格後，先用滑鼠選
qooapp帳號怎麼註冊
Mar 19, 2024 pm 08:58 PM
qooapp是能夠下載很多遊戲的軟體，那麼帳號怎麼註冊呢?用戶們需要點擊還沒有通行證，去註冊這個按鍵，然後選擇一種註冊方式就可以了。這篇帳號註冊方法介紹夠告訴大家具體該怎麼操作，以下就是具體的介紹，趕快看看吧。 qooapp帳號怎麼註冊答：點選去註冊，然後選擇一種註冊方式具體方法：1、先進入登入介面後，點選下面的還沒有通行證?現在申請。 2、之後選擇一個自己需要的登入方式。 3、之後就能夠直接使用了。官網註冊：1.開啟網站https://apps.ppaooq.com/，點選右上角註冊。 2、選擇註冊
