zoukankan      html  css  js  c++  java
  • javascript 入门 code(2)

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>a nav</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-family: 宋体;
    }

    body {
    text-align: center;
    font-size: 14px;
    }

    #content {
    margin: 0 auto;
    600px;
    }

    #content #nav {
    background: #006400;
    height: 32px;
    margin-top: 60px;
    }

    #content #nav ul {
    list-style: none;
    }

    #content #nav ul li {
    float: left;
    100px;
    line-height: 32px;
    position: relative;
    }

    #nav div {
    100px;
    position: absolute;
    left: 0px;
    padding-bottom: 0px;
    background: #006400;
    float: left;
    height: 0;
    overflow: hidden;
    }

    #content #nav li .a {
    text-decoration: none;
    color: #00CD00;
    line-height: 32px;
    display: block;
    border-right: 1px solid #009800;
    }

    #nav div a {
    text-decoration: none;
    color: #00CD00;
    line-height: 26px;
    display: block;
    }

    #nav div a:hover {
    background: #005400;
    }
    </style>
    </head>

    <body>
    <div id="content">
    <div id="nav">
    <ul id="supnav">
    <li><a href="#" class="a">好好学习</a>
    <div>
    <a href="#">好好学习</a>
    <a href="#">好好学习</a>
    <a href="#">好好学习</a>
    <a href="#">好好学习</a>
    </div>
    </li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    var supnav = document.getElementById("supnav");
    var nav = document.getElementById("nav");
    var btns = document.getElementsByTagName("li");
    var subnavs = nav.getElementsByTagName("div");
    var paddingbottom = 20;
    var defaultHeight = 0;

    function drop(obj, ivalue) {
    var a = obj.offsetHeight;
    var speed = (ivalue - obj.offsetHeight) / 8;
    a += Math.floor(speed);
    obj.style.height = a + "px";
    }

    window.onload = function() {
    for ( var i = 0; i < btns.length; i++) {
    btns[i].index = i;
    btns[i].onmouseover = function() {
    var osubnav = subnavs[this.index];
    var sublinks = osubnav.getElementsByTagName("a");
    if (osubnav.firstChild.tagName == undefined) {
    var itarheight = parseInt(osubnav.childNodes[1].offsetHeight)
    * sublinks.length + paddingbottom;
    } else {
    var itarheight = parseInt(osubnav.firstChild.offsetHeight)
    * sublinks.length + paddingbottom;
    }
    clearInterval(this.itimer);
    this.itimer = setInterval(function() {
    drop(osubnav, itarheight);
    }, 30);
    }
    btns[i].onmouseout = function() {
    var osubnav = subnavs[this.index];
    clearInterval(this.itimer);
    this.itimer = setInterval(function() {
    drop(osubnav, defaultHeight);
    }, 30);
    }
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    win8/10 bcdboot引导修复命令的原理和使用方法
    DD命令做备份和恢复
    基于DevExpress实现对PDF、Word、Excel文档的预览及操作处理
    工资计算方式
    什么样的辞职理由能让面试官满意
    使用sql删除数据库中的重复数据,只保留分组后的第一条数据
    mysql实现row_number()和row_number() over(partition by)
    c# dev Gridcontrol绑定多层list
    窗体高度获取,随机调整窗体展示的位置
    consul下载地址
  • 原文地址:https://www.cnblogs.com/iloveyoucc/p/2628428.html
Copyright © 2011-2022 走看看