• 智能社官网顶部导航实现demo


    从智能社的blue老师公开课中学习到了很多,在此表示感谢。

    这个导航很好玩,于是就想实现一个。

    html

    <div id="box">
          <ul>
            <li><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">内容</a></li>
            <li><a href="javascript:void(0)">模板</a></li>
            <li><a href="javascript:void(0)">招聘</a></li>
            <li><a href="javascript:void(0)">介绍</a></li>
            <li><a href="javascript:void(0)">成功</a></li>
            <li><a href="javascript:void(0)">论坛</a></li>
            <li><a href="javascript:void(0)">论坛</a></li>
            <li><a href="javascript:void(0)">论坛</a></li>
    
            <!--<li id="bgli"></li>-->
          </ul>
    </div>
    

      

    css

    * { padding: 0; margin: 0; }
    #box { margin: 50px auto; height: 40px; background: #ccc; }
    #box ul { position: relative; margin: 0 auto;  960px; }
    #box li { float: left; margin-right: 0px;  100px; height: 40px; }
    li { list-style: none; }
    a { font-style: normal; position: relative; color: #efefef; text-align: center; line-height: 40px; text-decoration: none; display: block; z-index: 200 }
    #bgli { position: absolute; background: red; border-radius: 10px;  70px; height: 40px; z-index: 100 }
    

      

    js

    !(function($){
        $.fn.extend({
            slider:function(sibling){
                sibling.first().after("<li id='bgli'></li>")
    
                $(this).hover(function(){
                    var nowleft = $(this).position().left;
                    var bjlileft = $("#bgli").position().left;
                    if(nowleft>bjlileft){
                        $("#bgli").stop().animate({left:nowleft+20
                        },300,function(){
                            $("#bgli").stop().animate({left:nowleft},100)
                        })
                    }else{
                        $("#bgli").stop().animate({left:nowleft-20
                        },300,function(){
                            $("#bgli").stop().animate({left:nowleft},100)
                        })
                    }
    
    
                },function(){
                    $("#bgli").stop().animate({left:0})
                    return false;
                })
            }
        })
    })(jQuery);
    
    //调用
    $(function(){
         var $li = $("#box>ul li");
         $li.slider($li)
    })
    

      

    要先引入jq库哦

  • 相关阅读:
    剑指Offer
    剑指Offer
    剑指Offer
    面积(area)
    最少步数
    细胞
    集合的前N个元素
    1~100卡特兰数(存一下hhhh)
    [Codeforces137C]History(排序,水题)
    [Codeforces676B]Pyramid of Glasses(递推,DP)
  • 原文地址:https://www.cnblogs.com/webSong/p/7645933.html
Copyright © 2020-2023  润新知