品牌加盟优化动画

contactus.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./iconfont/iconfont.css">
     <link rel="stylesheet" href="./css/contactus.css">
     <script src="./js/common.js"></script>
+    <script src="./js/commons.js"></script>
     <script src="./js/jquery-1.11.1.js"></script>
 </head>
 
@@ -237,8 +238,8 @@
         <div class="process">
             <ul class="proce">
                 <li>
-                    <div class="garden">
-                        <img src="./images/consultation.png">
+                    <div class="garden zero">
+                        <img src="./images/consultations.png">
                     </div>
                     <p>1、意向咨询</p>
                 </li>
@@ -298,7 +299,19 @@
         </div>
         <div class="introduce_box wow animated fadeInUp">
             <div class="map">
-                <img src="./images/maps.png" alt="">
+                <div class="maps">
+                    <p>
+                        汇金中心8层&nbsp;&nbsp;&nbsp;<span>千家总部</span>
+                    </p>
+                    <div class="coordinates">
+                        <img src="./images/coordinates.png">
+                    </div>
+                </div>
+                <div class="shadows">
+                    <div class="shadow">
+
+                    </div>
+                <div>
             </div>
         </div>
     </div>

css/contactus.css

@@ -76,6 +76,8 @@
 }
 #exhibition ul li:hover div{
     color: #12ab8d;
+    margin-top: -12px;
+    transition:margin-top 0.6s ;
 }
 #exhibition ul li:hover p{
     color: #12ab8d;
@@ -85,6 +87,7 @@
     font-family:"Microsoft Yahei" ;
     font-weight: bold;
     color: #464646;
+    transition:margin-top 0.6s ;
 }
 #exhibition ul li p{
     font-size: 16px;
@@ -297,17 +300,17 @@
     font-weight: bold;
 }
 .fifty-six{
-    font-size: 90.45px;
+    font-size: 70.45px;
     font-family:"Microsoft Yahei" ;
     font-weight: regular;
     color: #eff0f4;
     position: absolute;
     top:320px;
-    left: 160px;
+    left: 190px;
     filter: blur(5px);
 }
 .thirty-two{
-    font-size: 90.45px;
+    font-size: 70.45px;
     font-family:"Microsoft Yahei" ;
     font-weight: regular;
     color: #eff0f4;
@@ -317,7 +320,7 @@
     filter: blur(5px);
 }
 .sixty-seven{
-    font-size: 90.45px;
+    font-size: 70.45px;
     font-family:"Microsoft Yahei" ;
     font-weight: regular;
     color: #eff0f4;
@@ -493,6 +496,9 @@
     background: #fbfafa;
     box-shadow: 0px 5px 2px #d6d4d4;
 }
+#process .process ul li .zero{
+    background: #12ab8c;
+}
 #process .process .gardenz{
     width: 900px;
     margin: 0 auto;
@@ -527,10 +533,56 @@
     position: relative;
     margin-top: 60px;
     width: 100%;
-    overflow: hidden;
+    height: 900px;
+    background: url(../images/maps.jpg) no-repeat;
+}
+#qj_map .map:hover .maps{
+    opacity: 1;
+    top: 417px;
+}
+#qj_map .map .maps{
+    width: 416px;
+    position: relative;
+    top: 300px;
+    left: 336px;
+    opacity: 0;
+    transition:opacity 1s ,top 1s;
+}
+#qj_map .map .maps p{
+    text-align: center;
+    line-height: 140px;
+    font-size: 28px;
+    width: 416px;
+    height: 140px;
+    background: url(../images/coordinate.png) no-repeat;
+}
+#qj_map .map .maps span{
+    color: #12ab8d;
+    font-weight: bold;
 }
-#qj_map .map img {
+#qj_map .map .coordinates img{
     display: block;
+    margin: 0 auto;
+}
+#qj_map .map:hover .shadow {
+    width: 20px;
+    height: 10px;
+}
+#qj_map .map .shadows{
+    width: 20px;
+    height: 10px;
+    border-radius: 50%;
+    position: absolute;
+    top: 632px;
+    left: 534px;
+}
+#qj_map .map .shadow {
+    margin: 0 auto;
+    border-radius: 50%;
+    width: 0px;
+    height: 0px;
+    background: #464646;
+    transition:width 1s ,height 1s;
 }
 #qj_map .relation_us{
     position: absolute;

css/index.css

@@ -667,7 +667,7 @@
 }
 
 /* 部门体系 */
-#department .carousel-inner{
+#departmentd .carousel-inner{
     position: relative;
     width:100%;
     height:600px;
@@ -675,42 +675,42 @@
     overflow: hidden;
     
 }
-#department .carousel-inner .video_box{
+#departmentd .carousel-inner .video_box{
     position: absolute;
     top:0px;
     left:0px;
     width:154.34%;
 }
-#department .carousel-inner li{
+#departmentd .carousel-inner li{
     width:380px;
     height:600px;
     margin-right:25px;
     float:left;
     background: #254557;
 }
-#department .carousel-inner .video_box ul li .images{
+#departmentd .carousel-inner .video_box ul li .images{
     width: 380px;
     height: 380px;
     overflow: hidden;
 }
-#department .carousel-inner .video_box ul li .images img{
+#departmentd .carousel-inner .video_box ul li .images img{
     display: block;
     transition: all 0.8s ease-in-out
 }
-#department .carousel-inner .video_box ul li:hover .images img{
+#departmentd .carousel-inner .video_box ul li:hover .images img{
     transform: scale(1.2);
     transition: all 0.8s ease-in-out;
 }
-#department .carousel-inner li .text{
+#departmentd .carousel-inner li .text{
     text-align: center;
     padding: 20px;
     color: #fff;   
 }
-#department .carousel-inner li .text .titles{
+#departmentd .carousel-inner li .text .titles{
     font-size: 20px;
     margin-bottom:15px; 
 }
-#department .carousel-inner li .text p{
+#departmentd .carousel-inner li .text p{
     font-size: 14px;
     color:#eaeced;
 }

index.html

@@ -33,10 +33,10 @@
                 </a>
                 <div class="nav right">
                     <a class="nav_first" href="./index.html#header">首页</a>
-                    <a href="#introduce">公司介绍</a>
-                    <a href="#department">招贤纳士</a>
-                    <a href="#cours">发展历程</a>
-                    <a href="#product_service">产品服务</a>
+                    <a href="#introduces">公司介绍</a>
+                    <a href="#departmentx">招贤纳士</a>
+                    <a href="#coursd">发展历程</a>
+                    <a href="#product_services">产品服务</a>
                     <a href="./contactus.html">品牌加盟</a>
                     <a class="nav_last" href="about.html">千家风采</a>
                 </div>
@@ -128,6 +128,7 @@
         </ul>
     </div>
     <!-- 公司介绍 -->
+    <div id="introduces" style="height:60px;"></div>
     <div id="introduce" class="main_body">
         <div class="model_top">
             <div class="model_title wow animated fadeInUp">公司介绍</div>
@@ -221,7 +222,7 @@
         </div>
     </div>
     <!-- 天网体系 -->
-    <div id="department" class="main_body">
+    <div id="departments" class="main_body">
         <div>
             <div class="model_top">
                 <div class="model_title wow animated fadeInUp">天网体系</div>
@@ -251,7 +252,7 @@
         <img class="doublemint"  src="./images/Doublemint.png">
     </div>
     <!-- 部门体系 -->
-    <div id="department" class="main_body">
+    <div id="departmentd" class="main_body">
         <div class="main_body">
             <div class="model_top">
                 <div class="model_title wow animated fadeInUp">部门体系</div>
@@ -275,6 +276,7 @@
         </div>
     </div> 
     <!-- 招贤纳士 -->
+    <div id="departmentx" style="height:60px;"></div>
     <div id="department" class="main_body">
         <div id="department_tel">
             <span class="tel_title left">招聘热线:</span>
@@ -705,6 +707,7 @@
         </div>
     </div>
     <!-- 发展历程 -->
+    <div id="coursd" style="height:50px;"></div>
     <div id="cours" class="wow">
         <div class="main_body cours_content">
             <div class="cours_left cours_later">
@@ -778,6 +781,7 @@
         </div>
     </div>
     <!-- 产品服务 -->
+    <div id="product_services" style="height:60px;"></div>
     <div id="product_service">
         <div class="model_top">
             <div class="model_title wow animated fadeInUp">产品服务</div>

js/common.js

@@ -50,28 +50,5 @@ var common = function () {
         $(this).siblings().find(".shadow .sected").css("display","none");
     })
 }
-// 品牌圆环的事件
-var aaa = true;
-window.onscroll=function(){
-    var topScroll =document.documentElement.scrollTop;
-    if(topScroll >= 800){
-        if(!aaa){
 
-        }else{
-            $(".market").css("display","block");
-        // 圈内数字加载
-        
-        var num = 0;	        
-        var t = setInterval(function(){		       
-            num++;		       
-            var arr=document.getElementsByClassName("numbers")[0];	       
-            arr.innerHTML = num;			        
-            if(num==85){			        	
-                clearInterval(t);			        
-            }       	        
-        },60);
-        aaa = false;
-        }
-    }
-}
 

js/commons.js

+// 品牌圆环的事件
+var aaa = true;
+window.onscroll=function(){
+    var topScroll =document.documentElement.scrollTop;
+    if(topScroll >= 800){
+        if(!aaa){
+            
+        }else{
+            $(".market").css("display","block");
+        // 圈内数字加载
+        
+        var num = 0;	        
+        var t = setInterval(function(){		       
+            num++;		       
+            var arr=document.getElementsByClassName("numbers")[0];	       
+            arr.innerHTML = num;			        
+            if(num==85){			        	
+                clearInterval(t);			        
+            }       	        
+        },60);
+        aaa = false;
+        }
+    }
+}
\ No newline at end of file