Maison >interface Web >js tutoriel >JS implémente la fenêtre contextuelle d'enregistrement de connexion dans le menu déroulant
Cette fois, je vais vous présenter la mise en œuvre JS du menu déroulant fenêtre contextuelle de connexion et d'enregistrement Quelles sont les précautions pour la mise en œuvre JS du menu déroulant. fenêtre contextuelle de connexion et d'enregistrement. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.
Menu déroulantListe
<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>
Effet d'enregistrement de connexion
<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>
Articles connexes !
Lecture recommandée :
JS implémente le classement par étoiles d'évaluationjs implémente le fondu d'entrée et de sortie d'image à un moment donné vitesse uniformeCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!