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 相关文章推荐
jQuery拖拽div实现思路
Feb 19 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
浅谈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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP中用hash实现的数组
2011/07/17 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php数组转成json格式的方法
2015/03/09 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js自定义事件代码说明
2011/01/31 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
js常见遍历操作小结
2019/06/06 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python gdal安装与简单使用
2019/08/01 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
wxpython绘制圆角窗体
2019/11/18 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
keras:model.compile损失函数的用法
2020/07/01 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
优秀小学生家长评语
2014/01/30 职场文书
小学生学习感言
2014/03/10 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
高一学生期末评语
2014/04/25 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL