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>

  • 相关阅读:
    面向安全需求的VANET信道拥塞联合控制框架
    多普勒频移
    5G-Enabled Cooperative Intelligent Vehicular (5GenCIV) Framework: When Benz Meets Marconi
    Vehicle-to-Vehicle Channel Modeling and Measurements: Recent Advances and Future Challenges
    python之对象
    python之数字类型
    python之序列
    数据库进阶
    python之coding style
    python之web开发(待续)
  • 原文地址:https://www.cnblogs.com/iloveyoucc/p/2628428.html
Copyright © 2011-2022 走看看