产品中心增加导航

css/product.css

@@ -443,7 +443,10 @@
 .nav{
   position: fixed;
   top: 5rem;
-  left: 2rem;
+  left: 0.6rem;
+  border-radius: 0.08rem;
+    background: #ffffffff;
+    box-shadow: 1px 0 3px 0 #0000001a;
 }
 .nav>div{
   font-size: 0.14rem;
@@ -451,4 +454,29 @@
   color: white;
   color: #2d8cf0;
   line-height: 0.4rem;
+  width: 1.4rem;
+  border-bottom: 1px solid #f7f7f7f7 ;
+  cursor: pointer;
+}
+.nav div:first-of-type {
+  background-color: #298df0;
+  border-top-right-radius:0.08rem ;
+  border-top-left-radius: 0.08rem;
+  color: white;
+  border-bottom: 1px solid #298df0;
+}
+.nav div:last-of-type{
+  background-color: #298df0;
+    border-bottom-right-radius: 0.08rem;
+    border-bottom-left-radius: 0.08rem;
+    color: white;
+}
+.nav img{
+  width: 0.16rem;
+  height: 0.16rem;
+}
+.nav .active {
+  background-color: #298df0;
+  color: white;
+  border-bottom: 1px solid #298df0;
 }

js/about.js

@@ -75,9 +75,6 @@ $(function () {
   var offsetpx = (datalist.length - len) * divwidth; //可偏移度
   var offleft = 0; //当前偏移量
   function animate(offset) {
-    if (datalist.length <= 5) {
-      return;
-    }
     var left = parseInt(list.css("left")) + offset;
     var absnum = Math.abs(offset);
     if (left < 0 - offsetpx) {
@@ -109,9 +106,6 @@ $(function () {
   }
   //点击高亮滚动
   function animates(offset) {
-    if (datalist.length <= 5) {
-      return;
-    }
     var left = parseInt(list.css("left")) + offset; //获取元素属性
     if (index < 6 && left >= 0) {
       list.animate({ left: 0 }, 300, function () {});
@@ -143,9 +137,6 @@ $(function () {
 
   // 鼠标离开图片区域时，轮播继续
   function play() {
-    if (datalist.length <= 5) {
-      return;
-    }
     timer = setTimeout(function () {
       next.trigger("click");
       play();
@@ -162,9 +153,6 @@ $(function () {
 
   // 右按钮点击事件
   next.bind("click", function () {
-    if (datalist.length <= 5) {
-      return;
-    }
     // 判断当前是否在动画
     if (list.is(":animated")) {
       return;
@@ -186,9 +174,6 @@ $(function () {
 
   // 左按钮事件
   prev.bind("click", function () {
-    if (datalist.length <= 5) {
-      return;
-    }
     // 判断当前是否在动画
     if (list.is(":animated")) {
       return;

js/product.js

@@ -14,7 +14,7 @@ $(function () {
 
   function animate(offset) {
     var top = parseInt(list.css("top")) + offset;
-    console.log(list.css("top"));
+    // console.log(list.css("top"));
     var absnum = Math.abs(offset);
     index++;
 
@@ -30,7 +30,7 @@ $(function () {
       offset = 0;
     }
     showButton();
-    console.log("当前索引", index, top, offset);
+    // console.log("当前索引", index, top, offset);
     list.animate({ top: offset }, 300, function () {
       if (top > -200) {
       }
@@ -99,4 +99,40 @@ $(function () {
 
   play();
   showButton();
+
+  //楼梯导航
+  $(window).on("scroll", function () {
+    var $scroll = $(this).scrollTop();
+    // 拖动滚轮，点亮对应的楼层标签
+    $(".piece").each(function () {
+      var $stepTop = $(".piece").eq($(this).index()).offset().top;
+      // 楼层的top大于滚动条的距离
+      if ($stepTop > $scroll) {
+        $(".step").removeClass("active");
+        $(".step").eq($(this).index()).addClass("active");
+        // 中断循环
+        return false;
+      }
+    });
+  });
+
+  // 获取每个楼梯的offset().top，点击楼层让对应的内容模块移动到对应的位置
+  var $stepItem = $(".step");
+  $stepItem.on("click", function () {
+    $(this).addClass("active").siblings("li").removeClass("active");
+    var $stepTop = $(".piece")
+      .eq($(this).index() - 1)
+      .offset().top;
+    // 获取每个楼梯的offsetTop值
+    $("html,body").animate({
+      scrollTop: $stepTop
+    });
+  });
+
+  // 回到顶部
+  $(".top").on("click", function () {
+    $("html,body").animate({
+      scrollTop: 0
+    });
+  });
 });

sections/product.html

@@ -370,13 +370,14 @@
     </div>
     <div class="nav">
       <div>导航</div>
-      <div>区域大数据平台</div>
-      <div>校园教学平台</div>
-      <div>考试及测评系统</div>
-      <div>网课平台</div>
-      <div>校本资源库</div>
-      <div>微课工具</div>
-      <div>
+      <div class="step">区域大数据平台</div>
+      <div class="step">校园教学平台</div>
+      <div class="step">考试及测评系统</div>
+      <div class="step">网课平台</div>
+      <div class="step">智慧教学系统</div>
+      <div class="step">校本资源库</div>
+      <div class="step">云鸽微课</div>
+      <div class="top">
         <img src="../img/product/top.png" />
       </div>
     </div>