优化地图，支持，视频，体系

about.html

@@ -316,21 +316,21 @@
                     <span>SHORT FILM</span>
                 </div>
                 <div class="box_show">
-                    <ul class="video_box clear">
+                    <ul class="video_box clear" id="videoBox">
                         <li>
-                            <video src="https://qjvideo.oss-cn-beijing.aliyuncs.com/1.%E9%BA%BB%E9%9B%80%20%E6%9C%80%E7%BB%88%E9%85%8D%E9%9F%B3%E7%89%88_x264.mp4"
+                            <video class="video_one" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/1.%E9%BA%BB%E9%9B%80%20%E6%9C%80%E7%BB%88%E9%85%8D%E9%9F%B3%E7%89%88_x264.mp4"
                                 poster="./images/short_cut2.jpg" controls></video>
                         </li>
                         <li>
-                            <video src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E5%9B%9E%E5%AE%B6%E6%8E%A2%E4%BA%B2_x264.mp4" poster="./images/short_cut4.jpg"
+                            <video class="video_two" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E5%9B%9E%E5%AE%B6%E6%8E%A2%E4%BA%B2_x264.mp4" poster="./images/short_cut4.jpg"
                                 controls></video>
                         </li>
                         <li>
-                            <video src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E7%AC%AC%E4%B8%80%E9%AB%98%E5%B3%B0.mp4" poster="./images/short_cut1.jpg"
+                            <video class="video_there" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E7%AC%AC%E4%B8%80%E9%AB%98%E5%B3%B0.mp4" poster="./images/short_cut1.jpg"
                                 controls></video>
                         </li>
                         <li>
-                            <video src="https://qjvideo.oss-cn-beijing.aliyuncs.com/4.%E4%BA%BA%E6%9C%89%E5%85%B6%E5%B1%85.mp4" poster="./images/short_cut3.jpg"
+                            <video class="video_four" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/4.%E4%BA%BA%E6%9C%89%E5%85%B6%E5%B1%85.mp4" poster="./images/short_cut3.jpg"
                                 controls></video>
                         </li>
                     </ul>

css/contactus.css

@@ -364,58 +364,60 @@
 #test1 ul li:nth-of-type(1){
     width: 536px;
     background: url(../images/a1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
+
 }
 #test1 ul .firsted:nth-of-type(1){
     width: 536px;
     background: url(../images/a.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(2){
     background: url(../images/b1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(2){
     background: url(../images/b.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(3){
     background: url(../images/c1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(3){
     background: url(../images/c.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(4){
     background: url(../images/d1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(4){
     background: url(../images/d.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(5){
     background: url(../images/e1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(5){
     background: url(../images/e.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul li:nth-of-type(6){
     background: url(../images/f1.png) no-repeat;
-    transition:width 0.6s;
+    transition: background 0.4s ease-in,width 0.6s;
 }
 #test1 ul .firsted:nth-of-type(6){
     background: url(../images/f.png) no-repeat;
-    transition:width 0.6s ;
+    transition: background 0.4s ease-in,width 0.6s;
 }
-#test1 .on .shadow{
+#test1 .on .shadow:nth-of-type(1){
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: relative;
+   transition: all linear 500ms;
 }
 #test1 .on .shadow p{
     color: #fff;

js/about.js

@@ -68,9 +68,16 @@ window.onload = function () {
         },14);
     }
     autoPlay();
+    $("#videoBox li").bind("click","vodio",function(){
+        this.getElementsByTagName("video")[0].play();
+        $(this).siblings("li").each(function(i,el){
+            el.children[0].pause();
+            clearInterval(timer);
+        })
+    })
     video_box.onmouseover=function(){
         clearInterval(timer);
-    };
+    }; 
     video_box.onmouseout=function(){
         autoPlay();
     }

js/commons.js

@@ -21,11 +21,13 @@ window.onscroll=function(){
         aaa = false;
         }
     }
+    // 地图的坐标
     if(topScroll >= 3900){
+        setTimeout(function(){
         var sha=document.getElementsByClassName("shadowd")[0];
-        console.log(sha)
        var map=document.getElementsByClassName("maps")[0];
        map.classList.add("add");
         sha.classList.add("sha");
+    },1000);
     }
 }
\ No newline at end of file