JS实现下拉菜单列表与登录注册弹窗效果
时间:2019-03-31
本文章向大家介绍JS实现下拉菜单列表与登录注册弹窗效果,主要包括JS实现下拉菜单列表与登录注册弹窗效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
下拉菜单列表
<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实现下拉菜单列表与登录注册弹窗效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 十个实用MySQL函数
- 使用Apprenda和R分析应用程序工作负载数据
- 实现微信朋友圈所有动态点赞的自动化用例
- 后台设计的一些总结
- 2017年区块链当中的黑客大事件
- 5个云安全解决方案的注意事项
- 深入剖析ASP.NET的编译原理之二:预编译(Precompilation)
- 深入剖析ASP.NET的编译原理之二:预编译(Precompilation)
- Nodejs学习笔记(十六)--- Pomelo介绍&入门
- 美团再出幺蛾子,启动美团打车项目,滴滴感到威胁了吗?
- 深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)
- 深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)
- 域名quco.com近10万元被交易
- Silverlight本地化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 每日一个知识点:什么时候会触发Full GC
- 拥抱kotlin之如何习惯使用kotlin高阶函数
- Android中调用另一个Activity并返回结果(选择头像功能为例)
- Android 自定义缩短Toast显示时间的实例代码
- Android Presentation实现双屏异显
- Android中点击按钮启动另一个Activity及Activity之间传值问题
- Android中使用SeekBar拖动条实现改变图片透明度(代码实现)
- Android实现原生锁屏页面音乐控制
- android实现简单音乐播放器
- Android倒计时功能的实现代码
- android studio 使用Mocklocation虚拟定位
- Android自定义gridView仿头条频道拖动管理功能
- Android实现选项菜单子菜单
- Android scrollview如何监听滑动状态
- android 自定义圆角button效果的实例代码(自定义view Demo)