php下拉选项登录_JS实现下拉菜单登录注册弹窗

最新推荐文章于 2022-04-19 09:07:44 发布

weixin_39680208

最新推荐文章于 2022-04-19 09:07:44 发布

阅读量207

点赞数

文章标签： php下拉选项登录

本文链接：https://blog.csdn.net/weixin_39680208/article/details/115102437

版权

这篇博客展示了如何使用JS实现一个下拉菜单式的登录注册弹窗。内容包括CSS样式设计和JavaScript交互代码，详细解释了登录按钮的鼠标悬停效果以及弹窗的显示与隐藏逻辑。

摘要由CSDN通过智能技术生成

这次给大家带来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

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;

mask.style.height = document.body.clientHeight + "px";

window.onresize = function() {

var clientWidth = document.body.clientWidth;

var clientHeight = document.documentElement.clientHeight;

}

btn.onclick = function(){

mask.removeAttribute("hidden");

}

mask.onclick = function(){

mask.setAttribute("hidden","");

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！