网站导航部分-鼠标跟随滑动效果

htm部分

<div class="header">
  <div class="logo" id="toIndex">
    <img src="../imgs/pc/common/header/logo.png" alt="" />
  </div>
  <ul class="menu" id="menu">
    <li id="menu_know" class="menu-item">了解OKR</li>
    <li id="menu_pro" class="menu-item">
      功能
      <img
        class="menu_pro_arrow"
        src="/imgs/pc/common/header/down.png"
        alt=""
      />
      <ul id="menu-item-pro" class="menu-item-pro">
        <li id="mbo">
          <span class="menu-item-pro-icon"
            ><img src="imgs/pc/common/header/mbo-icon.png" alt="" /></span
          >目标管理
        </li>
        <li id="kpi">
          <span class="menu-item-pro-icon"
            ><img src="imgs/pc/common/header/kpi-icon.png" alt="" /></span
          >绩效管理
        </li>
        <li id="pm">
          <span class="menu-item-pro-icon"
            ><img src="imgs/pc/common/header/pm-icon.png" alt="" /></span
          >项目管理
        </li>
      </ul>
      <div class="mask" id="mask"></div>
    </li>
    <li id="menu_price" class="menu-item">价格</li>
    <li id="menu_knowledge" class="menu-item">OKR加油站</li>
    <li id="menu_down" class="menu-item">下载</li>
    <li id="menu_about" class="menu-item">OKR落地培训</li>
    <span class="under"></span>
  </ul>
  <div class="btns">
    <span class="login" id="toLogin">登录</span>
    <div class="free-btn" id="toRegist">免费试用</div>
    <div class="phone">
      <span class="phone-icon"
        ><img src="imgs/pc/common/header/phone.png" alt=""
      /></span>
      400-620-5999
    </div>
  </div>
</div>
<script src="js/pc/header.js" async></script>

js

let initPage = "";
// 始终获取最新的url
let from = getQueryString("from");
if (from) {
  sessionStorage.setItem("initPage", window.location.href);
  initPage = window.location.href;
} else {
  initPage = sessionStorage.getItem("initPage");
  if (!initPage) {
    initPage = window.location.href;
  }
}

// 获取参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

// 默认看下高度

if (top > 100) {
  $("#header").css({ backgroundColor: "white" });
}
$(window).scroll(function () {
  var top = $(document).scrollTop();
  if (top < 100) {
    console.log("toptop", top);
    $("#header").css({
      backgroundColor: "rgba(255,255,255," + top / 100 + ")",
    });
  } else {
    $("#header").css({ backgroundColor: "white" });
  }
});

$("#menu_know").click(function () {
  window.location.href = "about-okr.html";
  localStorage.setItem("page", 0);
  localStorage.setItem("item", "");
});
// 产品功能
$("#menu_pro").mouseenter(function () {
  $("#menu-item-pro").stop().fadeIn();
});
$("#menu_pro").mouseleave(function () {
  // 如果离开了就恢复初始化状态
  $("#menu-item-pro li").css({
    borderLeft: "6px transparent solid",
    background: "none",
  });
  initProItem();
  $("#menu-item-pro").stop().fadeOut();

  // 离开后旋转归位
  let img = $(this).children("img");
  img.removeClass("rotate");
  img.addClass("rotate1");
});
//目标管理
$("#mbo").click(function () {
  window.location.href = "mbo.html";
  localStorage.setItem("page", 1);
  localStorage.setItem("item", 1);
});
//绩效管理
$("#kpi").click(function () {
  window.location.href = "kpi.html";
  localStorage.setItem("page", 1);
  localStorage.setItem("item", 2);
});
//项目管理
$("#pm").click(function () {
  window.location.href = "pm.html";
  localStorage.setItem("page", 1);
  localStorage.setItem("item", 3);
});
// 价格
$("#menu_price").click(function () {
  window.location.href = "price.html";
  localStorage.setItem("page", 2);
  localStorage.setItem("item", "");
});
//
$("#menu_knowledge").click(function () {
  window.open("http://doc.okrt.com/", "_blank");
});
$("#menu_down").click(function () {
  window.location.href = "download.html";
  localStorage.setItem("page", 4);
  localStorage.setItem("item", "");
});
$("#menu_about").click(function () {
  window.location.href = "activity-okr.html";
  localStorage.setItem("page", 5);
  localStorage.setItem("item", "");
});

// 补充节点
$("#mask").mouseenter(function () {
  $("#menu-item-pro").stop().fadeIn();
});

// 点击之后动画默认选中
let pageFrom = localStorage.getItem("page");

let lfw = 0;
if ($($("#menu .menu-item")[pageFrom]).text() === "OKR加油站") {
  lfw = 84;
} else if ($($("#menu .menu-item")[pageFrom]).text() === "了解OKR") {
  lfw = 75;
} else {
  lfw = 57;
}
// 活动页面-没有活动时可删除
if ($($("#menu .menu-item")[pageFrom]).text() === "OKR落地培训") {
  lfw = 92;
}
// 默认选中一个
if (pageFrom) {
  $("#menu .under").show();
  $("#menu .under").css({
    left: $($("#menu .menu-item")[pageFrom]).position().left + lfw + "px",
  });
  // 鼠标离开回到起始位置
  $("#menu").mouseleave(function () {
    $("#menu .under")
      .stop(true, true)
      .animate(
        {
          left: $($("#menu .menu-item")[pageFrom]).position().left + lfw + "px",
        },
        350,
        "swing"
      );
  });
}

// 鼠标经过动画
$("#menu .menu-item").hover(function () {
  $("#menu .under").show();
});
$("#menu .menu-item").mouseover(function () {
  let lfw = 0;
  if ($(this).text() === "OKR加油站") {
    lfw = 84;
  } else if ($(this).text() === "了解OKR") {
    lfw = 75;
  } else {
    lfw = 57;
  }
  // 活动页面-没有活动时可删除
  if ($(this).text() === "OKR落地培训") {
    lfw = 92;
  }

  $("#menu .under")
    .stop(true, true)
    .animate(
      {
        left: $(this).position().left + lfw + "px",
      },
      350,
      "swing"
    );

  // 功能 小箭头旋转
  let img = $(this).children("img");
  if ($(this).index() === 1) {
    img.removeClass("rotate1");
    img.addClass("rotate");
  }
});

// 产品功能选项样式
$("#menu-item-pro li").mouseenter(function () {
  $("#menu-item-pro li").css({
    borderLeft: "6px transparent solid",
    background: "none",
  });

  switch ($(this).text().trim()) {
    case "目标管理":
      $(this).css({
        borderLeft: "6px #00ba88 solid",
        background: "rgba(0, 186, 136, 0.04)",
      });
      break;
    case "绩效管理":
      $(this).css({
        borderLeft: "6px #3A78F6 solid",
        background: "rgba(58,120,246, 0.04)",
      });
      break;
    case "项目管理":
      $(this).css({
        borderLeft: "6px #ED2E7E solid",
        background: "rgba(237,46,126, 0.04)",
      });
      break;
    default:
  }
});

// 产品功能选中后默认选中一个
initProItem();
function initProItem() {
  let item = localStorage.getItem("item");
  console.log("item", item);
  if (item && item > 0) {
    switch (item) {
      case "1":
        $($("#menu-item-pro li")[0]).css({
          borderLeft: "6px #00ba88 solid",
          background: "rgba(0, 186, 136, 0.04)",
        });
        break;

      case "2":
        $($("#menu-item-pro li")[1]).css({
          borderLeft: "6px #3A78F6 solid",
          background: "rgba(58,120,246, 0.04)",
        });
        break;
      case "3":
        $($("#menu-item-pro li")[2]).css({
          borderLeft: "6px #ED2E7E solid",
          background: "rgba(237,46,126, 0.04)",
        });
        break;
      default:
    }
  }
}

// 回首页
$("#toIndex").click(function () {
  window.location.href = "/";
  $("#menu .under").hide();
  localStorage.removeItem("page");
});

// 登录
$("#toLogin").click(function () {
  mixpanel.track("go login", {
    position: window.location.pathname,
    location: "top",
  });
  window.open("https://app.okrt.com/login?sem=" + initPage, "_blank");
});
// 注册
$("#toRegist").click(function () {
  mixpanel.track("go signUp", {
    position: window.location.pathname,
    location: "top",
  });
  window.open("https://app.okrt.com/register?sem=" + initPage, "_blank");
});

css

   .header {
      width: 1240px;
      margin: 0 auto;
      padding: 24px 0 30px 0;
      height: 46px;
      .menu {
        float: left;
        display: flex;
        font-size: 16px;
        line-height: 46px;
        margin-left: 17px;
        position: relative;
        // left: 40px;

        .menu-item {
          margin-left: 58px;
          cursor: pointer;
          color: #14142b;
          .menu_pro_arrow {
            width: 10px;
            position: relative;
            left: 10px;
          }
          // .rotate {
          //     transform-origin:center center;//旋转中心要是正中间 才行
          //     transform:rotate(180deg);
          // }
          // .rotate1{
          //       transform-origin:center center;
          //       transform:rotate(0deg); //返回原点
          //   }
          .rotate {
            transform-origin: center center;
            transform: rotate(180deg);
            transition: 0.2s;
          }
          .rotate1 {
            transform-origin: center center;
            transform: rotate(0deg);
            transition: 0.2s;
          }
        }
        .menu-item:nth-child(2) {
          position: relative;
        }
        .mask {
          height: 24px;
          width: 64px;
          position: absolute;
        }
        .menu-item-pro {
          display: none;
          position: absolute;
          width: 190px;
          opacity: 1;
          border-radius: 14px;
          box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.06);
          margin-top: 24px;
          left: -64px;
          padding: 24px 0;
          background-color: white;

          li {
            height: 60px;
            padding-left: 25px;
            border-left: 6px transparent solid;
            line-height: 60px;
          }
          // li:hover {
          //   border-left: 6px #00ba88 solid;
          //   background: rgba(0, 186, 136, 0.04);
          // }
          .menu-item-pro-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            position: relative;
            top: 2.5px;
            margin-right: 10px;
            img {
              width: 18px;
            }
          }
        }

        .under {
          display: none;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 35px;
          height: 2px;
          background-color: #3a78f6;
        }
      }
      .logo {
        float: left;
        img {
          width: 157px;
        }
        cursor: pointer;
      }
      .btns {
        float: right;
        position: relative;
        top: 8px;
        .login,
        .phone,
        .free-btn {
          display: inline-block;
        }
        .login {
          color: #3a78f6;
          font-size: 16px;
          cursor: pointer;
        }
        .free-btn {
          margin-left: 10px;
          width: 98px;
          height: 30px;
          background: #3a78f6;
          border-radius: 20px;
          line-height: 30px;
          color: white;
          text-align: center;
          position: relative;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            background: #6193f8;
          }
        }
        .phone {
          margin-left: 10px;
          cursor: pointer;
          width: 134px;
          font-size: 14px;
          color: #3a78f6;
          height: 30px;
          line-height: 30px;
          text-align: right;
          padding-right: 24px;
          border: 1px solid #3a78f6;
          border-radius: 21px;
          .phone-icon {
            display: inline-block;
            margin-right: 6px;
            img {
              width: 16px;
              position: relative;
              top: 3px;
            }
          }
        }
      }
    }