考试测评动画

css/product.css

   width: 100%;
   height:  100%;
   position: absolute;
+  visibility: hidden;
+}
+.exam_vise{
+ visibility: visible;
 }
 .exam_content img {
   width: 100%;
 }
 .nav .active {
   color: #2d8cf0;
+}
+/* 过度动画 */
+.flip-scale-down-hor {
+  -webkit-animation: flip-scale-down-hor 0.5s linear both;
+  animation: flip-scale-down-hor 0.5s linear both;
+}
+@keyframes flip-scale-down-hor {
+  0% {
+    -webkit-transform: scale(1) ;
+    transform: scale(1) ;
+  }
+
+  50% {
+    -webkit-transform: scale(0.5) ;
+    transform: scale(0.5);
+  }
+
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0) ;
+    transform-origin: top center;
+  }
+}
+.flip-scale-up-hor {
+  -webkit-animation: flip-scale-up-hor 0.5s linear both;
+  animation: flip-scale-up-hor 0.5s linear both;
+}
+@keyframes flip-scale-up-hor {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0) ;
+    transform-origin: bottom center;
+  }
+ 50% {
+   -webkit-transform: scale(0.5);
+   transform: scale(0.5);
+ }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    transform-origin: center center;
+  }
 }

js/product.js

   var timer;
   var blue = $(".blue");
   var grey = $(".grey");
-  var that = $;
-  function animate(offset, type) {
-    var top = parseInt(list.css("top")) + offset;
-    // console.log(list.css("top"));
-    var absnum = Math.abs(offset);
+  function showimg(index) {
     $.each(exam_slide, (idx, item) => {
       if (index != idx) {
         //隐藏
-        exam_slide.eq(idx).css("visibility", "hidden");
+        setTimeout(() => {
+          exam_slide.eq(idx).css("visibility", "hidden");
+        }, 500);
       } else {
         //显示当前索引图片
-        exam_slide.eq(idx).css("visibility", "visible");
+        // exam_slide.eq(idx).css("visibility", "visible");
+        setTimeout(() => {
+          exam_slide.eq(idx).css("visibility", "visible");
+        }, 500);
       }
     });
-
+  }
+  function animate(offset, type) {
     if (!type) {
+      //自动轮播
+      showimg(index);
       beforeidx = index;
       index++;
       offset = "-=" + Math.abs(offset);
       }
 
       showButton();
+    } else {
+      showimg(beforeidx);
+      console.log("显示上一张图片");
     }
     if (index > beforeidx) {
       console.log("从下往上滚");
+      exam_slide
+        .eq(beforeidx)
+        .addClass("flip-scale-down-hor")
+        .siblings("div")
+        .removeClass("flip-scale-down-hor");
     } else {
       console.log("从上往下滚");
+      exam_slide
+        .eq(beforeidx)
+        .addClass("flip-scale-up-hor")
+        .siblings("div")
+        .removeClass("flip-scale-up-hor");
     }
     console.log("当前索引", index, "上一个索引", beforeidx);
+    //
 
-    exam_slide.eq(beforeidx).animate(
-      {
-        visibility: "hidden",
-        transformOrigin: "top center",
-        transform: "scale(0)"
-      },
-      500,
-      () => {
-        console.log("动画完成");
-        if (type) {
-          beforeidx = index;
-        }
+    setTimeout(() => {
+      showimg(index);
+      exam_slide
+        .eq(index)
+        .addClass("flip-scale-up-hor")
+        .siblings("div")
+        .removeClass("flip-scale-up-hor");
+      console.log("显示当前图片");
+      if (index > beforeidx) {
+        // exam_slide
+        //   .eq(index)
+        //   .addClass("flip-scale-up-hor")
+        //   .siblings("div")
+        //   .removeClass("flip-scale-up-hor");
+      } else {
+        // exam_slide
+        //   .eq(index)
+        //   .addClass("flip-scale-down-hor")
+        //   .siblings("div")
+        //   .removeClass("flip-scale-down-hor");
       }
-    );
+    }, 500);
+    if (type) {
+      beforeidx = index;
+    }
   }
   var imglist = [
     {
   // 获取每个楼梯的offset().top，点击楼层让对应的内容模块移动到对应的位置
   var $stepItem = $(".step");
   $stepItem.on("click", function () {
-    $(this).addClass("active").siblings("li").removeClass("active");
+    $(this).addClass("active").siblings("div").removeClass("active");
     var $stepTop = $(".piece")
       .eq($(this).index() - 1)
       .offset().top;
     mouseenter: function () {
       //移入
       var myIndex = parseInt($(this).attr("index"));
+      if (myIndex == index) {
+        return;
+      }
       $.each(grey, function (idx, item) {
         $(this).show();
       });
       scrollTop: 0
     });
   });
-  container.hover(stop, play);
+  // container.hover(stop, play);
 
-  play();
-  showButton();
+  // play();
+  // showButton();
 });

js/trial.js

   $("#phone").focus(() => {
     $(".err_phone").hide();
   });
-
+  var mailboxf = true;
   //邮箱
   $("#mailbox").blur(() => {
     let mailbox = $("#mailbox").val();
+    mailboxf = false;
     var filter =
       /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
     let blnTest = filter.test(mailbox);
-    console.log(mailbox);
     if (mailbox && !blnTest) {
       $(".err_mailbox").show();
+      mailboxf = true;
     }
   });
   $("#mailbox").focus(() => {
   });
   $("#mailbox").bind("input propertychange change", function (event) {
     let mailbox = $("#mailbox").val();
+    mailboxf = false;
     var filter =
       /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
     let blnTest = filter.test(mailbox);
     if (mailbox && !blnTest) {
       $(".err_mailbox").show();
+      mailboxf = true;
     } else {
       $(".err_mailbox").hide();
     }
       $(".err_phone").show();
       return;
     }
+    if (mailboxf) {
+      //邮箱不合法
+      return;
+    }
     var data = {
       account: $("#account").val(),
       phone: $("#phone").val(),
         Loading = false;
         if (data.code === 0) {
           alert("申请成功");
+          $("#account").val("");
+          $("#phone").val("");
+          $("#mailbox").val("");
+          $("#comm").val("");
+          $(".err_account").hide();
+          $(".err_phone").hide();
+          $(".err_mailbox").hide();
         } else {
           alert(data.msg);
         }

sections/product.html

               </div>
               <div class="exam_content">
                 <div class="show_exam">
-                  <div class="exam_slide">
+                  <div class="exam_slide exam_vise">
                     <img src="../img/product/mtznh.png" />
                   </div>
                   <div class="exam_slide">
     </div>
     <div class="nav">
       <div>导航</div>
-      <div class="step">
+      <div class="step active">
         <p>区域大数据</p>
         <p>平台</p>
       </div>