Skip to content

T
test
提交 20c44a11 作者: 武宏岩
操作

支持修改

上级 7f9f5122
正在显示 包含 108 行增加 和 61 行删除
contactus.html
...@@ -159,72 +159,84 @@ ...@@ -159,72 +159,84 @@
<div id="test1"> <div id="test1">
<ul class="lateral-fold" data-event="click"> <ul class="lateral-fold" data-event="click">
<li class="on first firsted" > <li class="on first firsted" >
<div class="oness">品牌</div> <div class="association">
<div class="sected"> <div class="oness">品牌</div>
<p class="two">品牌支持</p> <div class="sected">
<p>十四年名企（2004年-2018年）</p> <p class="two">品牌支持</p>
<p>河北省唯一一家商务部备案房地产企业</p> <p>十四年名企（2004年-2018年）</p>
<p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p> <p>河北省唯一一家商务部备案房地产企业</p>
<p>唐山市具有网签资质的房地产企业</p> <p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p>
</div> <p>唐山市具有网签资质的房地产企业</p>
</div>
</div>
</li> </li>
<li class="on"> <li class="on">
<div class="shadow"> <div class="shadow">
<div class="oness twor">宣传</div> <div class="association associations">
<div class="sected secteds"> <div class="oness twor">宣传</div>
<p class="two">宣传支持</p> <div class="sected secteds">
<p>公司每年广告宣传支持费用200余万元</p> <p class="two">宣传支持</p>
<p>全市700多辆公交车进行全线开通千家广告</p> <p>公司每年广告宣传支持费用200余万元</p>
<p>电视台专访企业</p> <p>全市700多辆公交车进行全线开通千家广告</p>
<p>唐山市全覆盖广告</p> <p>电视台专访企业</p>
<p>唐山市全覆盖广告</p>
</div>
</div> </div>
</div> </div>
</li> </li>
<li class="on"> <li class="on">
<div class="shadow"> <div class="shadow">
<div class="oness twor">培训</div> <div class="association associations">
<div class="sected secteds"> <div class="oness twor">培训</div>
<p class="two">培训支持</p> <div class="sected secteds">
<p>免费千家商学院，数百套名师授课精品视频</p> <p class="two">培训支持</p>
<p>行业公开课，分享行内的最新资讯</p> <p>免费千家商学院，数百套名师授课精品视频</p>
<p>公司年会，提供学习分享观摩交流平台</p> <p>行业公开课，分享行内的最新资讯</p>
<p>更切实际的滚动式培训，培养人才</p> <p>公司年会，提供学习分享观摩交流平台</p>
<p>更切实际的滚动式培训，培养人才</p>
</div>
</div> </div>
</div> </div>
</li> </li>
<li class="on"> <li class="on">
<div class="shadow"> <div class="shadow">
<div class="oness twor">权证</div> <div class="association associations">
<div class="sected secteds"> <div class="oness twor">权证</div>
<p class="two">权证支持</p> <div class="sected secteds">
<p>20余家银行信贷协议合作单位</p> <p class="two">权证支持</p>
<p>一站式服务制定最佳信贷组合方案</p> <p>20余家银行信贷协议合作单位</p>
<p>严谨正规的合同，合同实时更新</p> <p>一站式服务制定最佳信贷组合方案</p>
<p>让每一笔带框安全无忧过户，过户更安全，服务更专业</p> <p>严谨正规的合同，合同实时更新</p>
<p>让每一笔带框安全无忧过户，过户更安全，服务更专业</p>
</div>
</div> </div>
</div> </div>
</li> </li>
<li class="on"> <li class="on">
<div class="shadow"> <div class="shadow">
<div class="oness twor">职能</div> <div class="association associations">
<div class="sected secteds"> <div class="oness twor">职能</div>
<p class="two">部门支持</p> <div class="sected secteds">
<p>总部拥有九大部门组成强大的职能中心</p> <p class="two">部门支持</p>
<p>近2000平总部大楼，支持300家门店业务运营</p> <p>总部拥有九大部门组成强大的职能中心</p>
<p>总部后台管理，协助门店管理</p> <p>近2000平总部大楼，支持300家门店业务运营</p>
<p>每个月60多万，专门定制系统房客源储备充足，足够支持成交</p> <p>总部后台管理，协助门店管理</p>
<p>每个月60多万，专门定制系统房客源储备充足，足够支持成交</p>
</div>
</div> </div>
</div> </div>
</li> </li>
<li class="on last" > <li class="on last" >
<div class="shadow"> <div class="shadow">
<div class="oness twor">系统</div> <div class="association associations">
<div class="sected secteds"> <div class="oness twor">系统</div>
<p class="two">系统支持</p> <div class="sected secteds">
<p>专门的系统，定制升级</p> <p class="two">系统支持</p>
<p>成长体系完善，平台晋升广阔</p> <p>专门的系统，定制升级</p>
<p>有自己的直营店做标杆，鼓励1:1复制</p> <p>成长体系完善，平台晋升广阔</p>
<p>大数据系统，足够支持成交</p> <p>有自己的直营店做标杆，鼓励1:1复制</p>
<p>大数据系统，足够支持成交</p>
</div>
</div> </div>
</div> </div>
</li> </li>
......
css/contactus.css
...@@ -429,7 +429,33 @@ ...@@ -429,7 +429,33 @@
#test1 ul .firsted:nth-of-type(6){ #test1 ul .firsted:nth-of-type(6){
background: url(../images/f.jpg) no-repeat; background: url(../images/f.jpg) no-repeat;
} }
#test1 .on .association{
width: 536px;
height: 400px;
overflow: hidden;
position: absolute;
left: 0px;
top:0px;
}
#test1 .on .associations{
left: -417px;
}
@-webkit-keyframes kais{
0%{
left: -417px;
}
80%,100%{
left: 0px;
}
}
@-webkit-keyframes shous{
10%{
left: -417px;
}
100%{
left: -417px;
}
}
#test1 .on p{ #test1 .on p{
color: #fff; color: #fff;
text-align: right; text-align: right;
...@@ -439,15 +465,27 @@ ...@@ -439,15 +465,27 @@
font-family:"Microsoft Yahei" ; font-family:"Microsoft Yahei" ;
font-weight: bold; font-weight: bold;
} }
#test1 .on .sected{ #test1 .on .sected{
width: 378px; width: 380px;
height: 140px; height: 140px;
overflow: hidden; overflow: hidden;
position: absolute; margin-left:140px;
top: 220px; margin-top:10px;
left: 140px;
opacity: 1; opacity: 1;
transition:all .7s; }
@-webkit-keyframes kai{
100%{
opacity: 1;
}
}
@-webkit-keyframes shou{
10%{
opacity: 0;
}
100%{
opacity: 0;
}
} }
#test1 .on .oness{ #test1 .on .oness{
width: 90px; width: 90px;
...@@ -457,9 +495,8 @@ ...@@ -457,9 +495,8 @@
color: #fff; color: #fff;
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
position: absolute; margin-left: 430px;
left: 430px; margin-top:110px;
top: 110px;
background: linear-gradient(to left, #fff, #fff) left top no-repeat, background: linear-gradient(to left, #fff, #fff) left top no-repeat,
linear-gradient(to bottom, #fff, #fff) left top no-repeat, linear-gradient(to bottom, #fff, #fff) left top no-repeat,
linear-gradient(to left, #fff, #fff) right top no-repeat, linear-gradient(to left, #fff, #fff) right top no-repeat,
...@@ -469,10 +506,6 @@ ...@@ -469,10 +506,6 @@
linear-gradient(to left, #fff, #fff) right bottom no-repeat, linear-gradient(to left, #fff, #fff) right bottom no-repeat,
linear-gradient(to left, #fff, #fff) right bottom no-repeat; linear-gradient(to left, #fff, #fff) right bottom no-repeat;
background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
transition:left .8s;
}
#test1 .on .twor{
left: 15px;
} }
#test1 .on .secteds{ #test1 .on .secteds{
opacity: 0; opacity: 0;
......
js/common.js
...@@ -42,10 +42,12 @@ var common = function () { ...@@ -42,10 +42,12 @@ var common = function () {
$(".on").click(function(){ $(".on").click(function(){
$(this).css("width","536px").siblings().css("width","118px"); $(this).css("width","536px").siblings().css("width","118px");
$(this).addClass('firsted').siblings().removeClass('firsted'); $(this).addClass('firsted').siblings().removeClass('firsted');
$(this).find(".oness").css("left","430px"); $(this).find(".sected").css('-webkit-animation','kai 0.6s linear forwards')
$(this).siblings().find(".oness").css("left","15px"); $(this).find(".sected").addClass('secteds')
$(this).find(".sected").css({"opacity":"1","left":"140px","width":"378px"}); $(this).siblings().find(".sected").css('-webkit-animation','shou 0.6s linear forwards');
$(this).siblings().find(".sected").css({"opacity":"0","left":"-100px","width":"0px"}); $(this).find(".association").css('-webkit-animation','kais 0.6s linear forwards')
$(this).find(".association").addClass('associations')
$(this).siblings().find(".association").css('-webkit-animation','shous 0.6s linear forwards');
}) })
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论