JS实现下拉菜单列表与登录注册弹窗效果


Posted in Javascript onAugust 10, 2017

下拉菜单列表

<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实现下拉菜单列表与登录注册弹窗效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
浅谈sass在vue注意的地方
Aug 10 #Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
Angular 2.0+ 的数据绑定的实现示例
Aug 09 #Javascript
Ionic3实现图片瀑布流布局
Aug 09 #Javascript
JavaScript闭包和回调详解
Aug 09 #Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 #Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 #Javascript
You might like
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python os.access()用法实例
2019/02/18 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
医学毕业生自我鉴定
2013/10/30 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
公司承诺书怎么写
2014/05/24 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书