Skip to content

T
test
提交 566bbc35 作者: 武宏岩
操作

品牌加盟优化动画

上级 59ed3c66
正在显示 包含 118 行增加 和 47 行删除
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 0 → 100644
// 品牌圆环的事件
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
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论