溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS怎么實現下拉菜單列表與登錄注冊彈窗效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，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>
<div class="menu">
<div class="btn">羅蘭首頁</div>
<div class="btn">歌曲專欄
<ul>
<li>流行</li>
<li>搖滾</li>
<li>藍調</li>
<li>民謠</li>
</ul>
</div>
<div class="btn">音樂人專欄
<ul>
<li>內地</li>
<li>歐美</li>
<li>日韓</li>
<li>港臺</li>
</ul>
</div>
<div class="btn">樂器專欄
<ul>
<li>鋼琴</li>
<li>小提琴</li>
<li>吉他</li>
<li>架子鼓</li>
</ul>
</div>
<div class="btn">戲曲專欄
<ul>
<li>京劇</li>
<li>話劇</li>
<li>豫劇</li>
<li>黃梅戲</li>
</ul>
</div>
<div class="btn">魅力ROLAND體驗區
<ul>
<li>新曲</li>
<li>唱片</li>
<li>MV</li>
</ul>
</div>
</div>
</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-div {
width: 500px;
height: 300px;
background-color: white;
position: fixed;
z-index: 99;
}
</style>
</head>
<body>
<div class="mask" hidden></div>
<div class="log-div" hidden="hidden"></div>
<div class="login">登 錄</div>
<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-div")[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怎么實現下拉菜單列表與登錄注冊彈窗效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
