仿百度导航跟随效果demo效果示例（整理）-阿里云开发者社区

仿百度导航跟随效果demo效果示例（整理）

2023-09-15 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 仿百度导航跟随效果demo效果示例（整理）

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>导航滑动跟随效果</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        font-size: 12px;
        min-width: 1200px;
      }
      fieldset,
      img {
        border: none;
      }
      input,
      select,
      textarea {
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        font-size: 100%;
        outline: none;
      }
      li {
        list-style: none;
        font-style: normal;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
      .nav {
        height: 60px;
        background: #dca3a3;
        position: relative;
      }
      .nav li {
        float: left;
        height: 60px;
      }
      .nav li a {
        display: block;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        min-width: 100px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        position: relative;
        z-index: 10px;
        text-decoration: none;
      }
      .nav li a:hover {
        text-decoration: none;
      }
      .gl {
        position: absolute;
        top: 0;
        left: 0;
        height: 60px;
        background: #00bc12;
        z-index: 9px;
        width: 140px;
      }
    </style>
  </head>
  <body>
    <div class="w_1200" style="padding:0 0 100px 0;position:relative;">
      <div class="nav">
        <div class="gl"></div>
        <ul>
          <li><a href="###">首页</a></li>
          <li><a href="###">我是导航一</a></li>
          <li><a href="###">我是导航二</a></li>
          <li><a href="###">我是导航三</a></li>
          <li><a href="###">我是导航四</a></li>
          <li><a href="###">我是导航五</a></li>
          <li><a href="###">我是导航六</a></li>
        </ul>
      </div>
    </div>
    <script>
      $(".nav ul a").each(function() {
        var hover_a = $(this);
        var hover_awidth = $(this).innerWidth();
        var hover_aleft = hover_a.position().left;
        $(this).mouseover(function() {
          $(".gl").stop();
          hover_awidth = $(this).innerWidth();
          $(".gl").animate({
            left: hover_aleft + "px",
            width: hover_awidth + "px"
          }, 250);
        })
        $(this).mouseout(function() {
          $(".gl").stop();
          if ($(this).parent().parent().find(".gl_hover").length > 0) {
            var gl_hover_left = $(this).parent().parent().find(".gl_hover").position().left;
            hover_awidth = $(this).parent().parent().find(".gl_hover").innerWidth();
            $(".gl").animate({
              left: gl_hover_left + "px",
              width: hover_awidth + "px"
            }, 250);
          } else {
            hover_awidth = $(".nav ul a:first").innerWidth();
            $(".gl").animate({
              left: "0px",
              width: hover_awidth + "px"
            }, 250);
          }
        })
      })
      $(".nav ul a").click(function() {
        $(this).parent().siblings().removeClass("gl_hover");
        $(this).parent().addClass("gl_hover");
      })
    </script>
  </body>
</html>

仿百度导航跟随效果demo效果示例（整理）

热门文章

最新文章

相关电子书

相关实验场景