zoukankan      html  css  js  c++  java
  • 导航栏实例

    <!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>无标题文档</title>
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    oDiv{ 100px; height:100px; background:#FF0000; position:absolute; left:0px; top:20px;}

    ul li{ list-style:none;}
    a{ text-decoration:none;}
    #nav{ margin:0 auto; 520px;}
    #nav li{ float:left; 120px; text-align:center; background:#CCCCCC; display:block; margin-right:10px; height:30px; line-height:30px; text-decoration:none; font-size:14px; font-weight:bold;}
    #nav li a{ display:block;}
    #nav li .list{ height:0px; position:absolute; 120px; overflow:hidden;}
    #nav li .list li{ background:#003399; border:none; height:28px; line-height:28px; color:#FFFFFF; display:block;}
    </style>

    <script language="javascript">
    window.onload=function()
    {
    var oDiv=document.getElementById("oDiv");


    //startMove(oDiv);
    var oNav=document.getElementById("nav");
    var oLi=oNav.children;

    for(var i=0;i<oLi.length;i++)
    {
    oLi[i].onmouseover=function()
    {
    var oUl=this.getElementsByTagName("ul")[0];

    oUl.style.height="auto";
    var height=parseInt(getStyle(oUl,"height"));
    oUl.style.height="0px";
    startMove(oUl,height);

    }
    oLi[i].onmouseout=function()
    {
    var oUl=this.getElementsByTagName("ul")[0];
    //oUl.setAttribute("style","display:none");
    oUl.style.height="auto";
    var height=parseInt(getStyle(oUl,"height"));

    startMove(oUl,0);
    }
    }


    }
    </script>
    </head>

    <body>
    <br/><br/><br/><br/><br/><br/>
    <div id="oDiv"></div>


    <ul id="nav">
    <li><a href="#">网站首页</a></li>
    <li>
    <a href="#">关于我们</a>
    <ul class="list">
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    </ul>
    </li>
    <li>
    <a href="#">新闻中心</a>
    <ul class="list">
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    </ul>
    </li>
    <li>
    <a href="#">产品展示</a>
    <ul class="list">
    <li>公司简介</li>
    <li>公司简介</li>
    <li>公司简介</li>
    </ul>
    </li>
    </ul>
    <script language="javascript" >
    var i=0;
    function startMove(obj,iTarget)
    {
    clearInterval(obj.iTimer);
    obj.iTimer=setInterval(function(){


    var iCur=parseInt(getStyle(obj,"height"));
    var iSpeed="";

    iSpeed=((iTarget-iCur)/8);

    if(iSpeed>0)
    {
    iSpeed=Math.ceil(iSpeed);
    }
    else
    {
    iSpeed=Math.floor(iSpeed);
    }

    if(iCur==iTarget)
    {
    clearInterval(obj.iTimer);
    }
    else
    {
    obj.style["height"]=iCur+iSpeed+"px";
    }


    },10)
    }

    //获取样式
    function getStyle(obj,attr)
    {
    var v="";
    if(obj.currentStyle)
    {
    v=obj.currentStyle[attr];
    }
    else
    {
    v=getComputedStyle(obj,false)[attr];
    }
    return v;
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    Lombok 安装、入门
    Centos 6.5中使用yum安装jdk
    Mysql规范和使用注意点(转)
    Java编码规范
    windows2016重新配置sid
    Postman POST接口请求无法获取数据
    微信修改密码
    SQL事务
    .net时间格式化
    SQL查询列是否有重复值
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/5342854.html
Copyright © 2011-2022 走看看