Maison > Article > interface Web > JS implémente la fenêtre contextuelle d'enregistrement de connexion dans le menu déroulant

JS implémente la fenêtre contextuelle d'enregistrement de connexion dans le menu déroulant

php中世界最好的语言original: 2018-04-19 11:11:162468parcourir

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 Liés

Voir plus