19.3.1 jquery实现百度导航条效果

最新推荐文章于 2022-02-15 20:32:27 发布

原创最新推荐文章于 2022-02-15 20:32:27 发布 · 247 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航条

前端效果整理专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS实现的动态导航栏效果，通过:hover伪类和jQuery动画，当鼠标悬停在导航项上时，背景色块会平滑移动到当前导航项下方，增强了用户体验。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               padding: 0;
               margin: 0;
           }
           #top{
               width:100%;
               height: 32px;
               background-color:#01204F;
               position: relative;
           }
           #dao{
               width: 984px;
               height: 32px;
               border-left: 2px solid red;
               border-right: 2px solid red;
               margin: 0 auto;
               position: relative;
           }
           #dao a{
               display:block ;
               float: left;
               width: 70px;
               height: 32px;
               line-height: 32px;
               text-decoration: none;
               font-weight: 700;
               color: white;
               text-align: center;
               /*position不可少*/
               position: relative;
               z-index:1;
           }
           #top #dao #bei{
               width: 70px;
               height: 32px;
               background-color: #FF8C00;

               position: absolute;
               top: 0;
               left: 0px;

           }
       </style>
       <script type="text/javascript" src="Jquery/jquery-3.3.1.min.js"></script>
   </head>
   <body>
          <div id="top">
           <div id="dao">
               <a href="">国内</a>
                <a href="">国际</a>
                <a href="">军事</a>
                <a href="">财经</a>
                <a href="">娱乐</a>
                <a href="">体育</a>
                <a href="">互联</a>
                <a href="">科技</a>
                <a href="">游戏</a>
                <a href="">女人</a>
                <a href="">汽车</a>
                <a href="">房产</a>
                <a href="">个性</a>
                <div id="bei"></div>
           </div>
          </div>
       <script type="text/javascript">
           //a标签移入事件
           $("#dao a").mouseenter(function(){
               //获取移入a标签的序号
               var c=$(this).index();

               //计算#bei色块新的left值t
               var t=c*70;
               //为#bei色块添加animate（）事件
               $("#bei").finish().animate({'left':t},300);
           })

       </script>
   </body>
</html>