这次给大家带来JS实现下拉菜单登录注册弹窗,JS实现下拉菜单登录注册弹窗的注意事项有哪些,下面就是实战案例,一起来看一下。
*{
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;
}
罗兰首页
歌曲专栏
- 流行
- 摇滚
- 蓝调
- 民谣
音乐人专栏
- 内地
- 欧美
- 日韩
- 港台
乐器专栏
- 钢琴
- 小提琴
- 吉他
- 架子鼓
戏曲专栏
- 京剧
- 话剧
- 豫剧
- 黄梅戏
魅力ROLAND体验区
- 新曲
- 唱片
- MV
登录注册效果
* {
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;
}
登 录
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
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");
}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: