zoukankan      html  css  js  c++  java
  • 动态导航栏

    <!DOCTYPE html>
    <html lang="en">
        <head>
    <meta charset="utf-8">
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                body{
                    background-color: #000;
                }
                .box{
                     800px;
                    height: 42px;
                    margin: 100px auto;
                    background: url(images/rss.png) no-repeat right center #fff;
                    border-radius: 5px;
                    position: relative;
                    z-index: 0;
                }
                .box ul{
                    list-style: none;
                    position: relative;
                }
                .box ul li{
                    float: left;
                     83px;
                    height: 42px;
                    font-size: 14px;
                    line-height: 42px;
                    text-align: center;
                    cursor: pointer;
                }
                .box .bg{
                     83px;
                    height: 42px;
                    background: url(images/cloud.gif) no-repeat;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    z-index: -1;
                }
            </style>
            <script type="text/javascript">
                function $(id){
                    return document.getElementById(id);
                }
                window.onload = function(){
                    var leader = 0;
                    var target = 0;
                    var current = 0;
                    setInterval(function(){
                        leader = leader + (target - leader) / 10;
                        $('logo').style.left = leader + 'px';
                    }, 10);
                    var lis = $('nav').getElementsByTagName('li');
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].onmouseover = function(){
                            //计算出当前li的位置
                            target = this.offsetLeft;
                        };
                        lis[i].onmouseout = function(){
                            //计算出当前li的位置
                            target = current;
                        };
                        lis[i].onclick = function(){
                            //计算出当前li的位置
                            current = this.offsetLeft;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div class="box" id = "nav">
                <ul>
                    <li>新闻模块</li>
                    <li>体育模块</li>
                    <li>财经模块</li>
                    <li>汽车模块</li>
                    <li>天气模块</li>
                    <li>国内新闻</li>
                    <li>国内新闻</li>
                    <li>国内新闻</li>
                </ul>
                <span class="bg" id="logo"></span>
            </div>
        </body>
    </html>
  • 相关阅读:
    深度排序与alpha混合 【转】
    SVN服务器配置说明 【转】
    3D空间中射线与轴向包围盒AABB的交叉检测算法 【转】
    Linux系统管理员不可不知的命令:sudo
    Linux 系统实时监控的瑞士军刀 —— Glances
    shell定期转移日志文件到云盘并定期删除云盘文件
    zabbix监控第二块网卡是否连通
    Gitlab自动触发Jenkins构建打包
    shell脚本检测网络是否畅通
    Prometheus入门
  • 原文地址:https://www.cnblogs.com/mmit/p/11257772.html
Copyright © 2011-2022 走看看