JS實(shí)現(xiàn)下拉菜單列表與登錄注冊彈窗效果
更新時間:2017年08月10日 07:51:50 投稿:jingxian
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)下拉菜單列表與登錄注冊彈窗效果。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
下拉菜單列表
<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>藍(lán)調(diào)</li> <li>民謠</li> </ul> </div> <div class="btn">音樂人專欄 <ul> <li>內(nèi)地</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體驗區(qū) <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實(shí)現(xiàn)下拉菜單列表與登錄注冊彈窗效果就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作實(shí)例詳解
這篇文章主要介紹了js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實(shí)例形式分析了哈希表的原理、哈希鍵值對操作相關(guān)技巧,需要的朋友可以參考下2016-12-12原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法實(shí)例分析
這篇文章主要介紹了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量相關(guān)功能、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02js格式化貨幣數(shù)據(jù)實(shí)現(xiàn)代碼
貨幣數(shù)據(jù)想要一某種形式在頁面中顯示的話,首先是必須要格式化的,下面為大家介紹下具體的格式化代碼,感興趣的朋友可以參考下2013-09-09