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>

时间: 08-07

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果的相关文章

Delphi访问网页中的下拉菜单

Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml;procedure TForm1.Button1Click(Sender: TObject);var  doc: IHTMLDocument2;  coll: IHTMLElementCollection;  iPos, iIndex: Integer;  selElem: IHtmlSelectElement;  optElem: IHtmlOptionElement;begin  doc :

js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

Bootstrap3系列:下拉菜单

1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="styl

【网摘】C#.NET 在 MVC 中动态绑定下拉菜单的方法

1. 已知下拉菜单列表项: 在 Controller 控制器类中输入已下代码  1 public class DemoController : Controller 2 { 3     public ActionResult BindDropDownList() 4     { 5         List<SelectListItem> select1 = new List<SelectListItem> 6         { 7             new SelectL

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

纯css和js版下拉菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>css版下拉菜单</title> <style type="text/css"> div,body,ul,li{padding:0;margin:0; list-style:none;} .all{width:550px; height:30px; backgrou

SharePoint 2010 快速隐藏列表项目的下拉菜单

SharePoint 2010 快速隐藏列表项目的下拉菜单 有时候为了不让一些用户编辑列表项,需要隐藏列表项目的下拉菜单.这里提供一个快速的方法,只需要增加一个内容编辑器控件,将css代码写入其HTML源即可. 修改前: 修改后: CSS代码: <style type="text/css"> .s4-ctx{ display:none; } </style> SharePoint 2010 快速隐藏列表项目的下拉菜单,布布扣,bubuko.com