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网页特效操作流程——下拉菜单列表与登录注册弹窗效果的更多相关文章
- js面向对象封装级联下拉菜单列表
本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...
- Delphi访问网页中的下拉菜单
Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml;procedure TForm1.Button1Click(Sender: TObject);va ...
- js递归生成树形下拉菜单
需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...
- js使用面向对象编写下拉菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- js实现按钮开关.单机下拉菜单
通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- 基于Bootstrap实现下图所示效果的页面，一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
随机推荐
- SpringMvc多视图配置(jsp、velocity、freemarker) 在src目录views.properties配置
#welcome为modelAndView.setViewName(" welcome " ) ; 中的welcome .(class)固定写法 welcome.(class)=o ...
- 自画一张linux基础架构学习框架图
草图一张,仅供参考,学习并掌握下面这张图的技能只是个开始--
- Jenkins迁移job
说明:从一个Jenkins服务器A将现有job迁移到另外一个Jenkins服务器B. 方法:You can copy or move build jobs between instances of p ...
- DotNetCore跨平台~Dockerfile的解释
回到目录 大叔感觉网上对Dockerfile的说明不是很清楚,或者说怎么去用说的不清楚,在vs2017里我们可以去建立自己的Dockerfile文件,然后你的项目可以被生成一个镜像,把它推到仓库之后, ...
- MyBatis源码解析【6】SqlSession运行
前言 这个分类比较连续,如果这里看不懂,或者第一次看,请回顾之前的博客 http://www.cnblogs.com/linkstar/category/1027239.html 经过之前的学习我们知 ...
- PHP闭包和高阶函数
<?php function func($a, $b) { $line = function ($x) use ($a, $b) { return $a*$x + $b; }; return $ ...
- USB的四种传输类型与端点
1.事务 在介绍USB传输类型之前,请允许我先简答介绍一下USB事务. 事务一般由令牌包.数据包(可选).握手包组成. 令牌包:用来启动一个事务,总是由主机发送. 数据包:可以从主机到设备,也可以由设 ...
- 51nod_1836:战忽局的手段（期望）
题目链接 公式比较好推 精度好难搞啊@_@ 下面记笔记@_@ **** long double用%LF输出 **** __float128 精度比 long double 高(可以在中间运算时使用,输 ...
- nyoj_6:喷水装置（一）
要让总的使用到的装置数尽可能少,则可以贪心每次选取未使用的半径最大的装置 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=6 #inclu ...
- 关于解决mysql数据库乱码的问题
最近在开发的过程中频繁的使用到了mysql'这款数据库,mysql的中文乱码问题一直让人头疼.以前遇到过几次,但是都一不小心就解决了,这次终于明白到底是怎么回事了.可能我下面手的这种解决方案只适合于我 ...