以下是 发展简史jQuery时间轴特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>发展简史jQuery时间轴特效</title>
<link href="css/chinaz.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="history">
<div class="start-history">
<p class="cc_history">发展简史</p>
<p class="next_history">PHYLOGENY</p>
<div class="history_left">
<p class="history_L year2006">
<span class="history_2006_span">2006</span>
<b class="history_2006_b">
<span class="history_l_month">10<br/>月</span>
<span class="history_l_text">开展基于互联网的视频服务业务<br/>CC视频联盟正式公测</span>
</b>
</p>
<p class="history_L yearalmost">
<span class="history_2006_span">2008</span>
<b class="history_2006_b">
<span class="history_l_month">10<br/>月</span>
<span class="history_l_text">收购康盛创想<br/>旗下视频建站系supev</span>
</b>
</p>
<p class="history_L year2009">
<span class="history_2006_span">2009</span>
<b class="history_2006_b">
<span class="history_l_month">04<br/>月</span>
<span class="history_l_text">推出CMedia视频广告平台，<br/>对旗下视频媒体进行整合营销</span>
</b>
</p>
<p class="history_L yearalmost">
<span class="history_2006_span blue">2010</span>
<b class="history_2006_b blue">
<span class="history_l_month">01<br/>月</span>
<span class="history_l_text">CC视频获得广电总局颁发的<br/>音视频许可证</span>
</b>
</p>
<p class="history_L yearalmost">
<span class="history_2006_span blue">2011</span>
<b class="history_2006_b blue">
<span class="history_l_month">08<br/>月</span>
<span class="history_l_text smalltext">CC视频获得由迪士尼旗下思伟投资、IDG、江苏高科技投资集团的<br/>B轮融资2000万美元</span>
</b>
</p>
<p class="history_L year2011">
<span class="history_2006_span blue">2011</span>
<b class="history_2006_b blue">
<span class="history_l_month">09<br/>月</span>
<span class="history_l_text">CC视频荣获“2011年<br/>中国云计算最佳应用实践奖”</span>
</b>
</p>
<p class="history_L year2011">
<span class="history_2006_span blue">2012</span>
<b class="history_2006_b blue">
<span class="history_l_month">03<br/>月</span>
<span class="history_l_text">CC视频成功举办2012中国<br/>远程教育技术创新与应用论坛</span>
</b>
</p>
<p class="history_L year2011">
<span class="history_2006_span yellow">2012</span>
<b class="history_2006_b yellow">
<span class="history_l_month">09<br/>月</span>
<span class="history_l_text">CC视频发布视频云<br/>开放战略及API2.0</span>
</b>
</p>
<p class="history_L year2013">
<span class="history_2006_span yellow">2013</span>
<b class="history_2006_b yellow">
<span class="history_l_month">04<br/>月</span>
<span class="history_l_text smalltxt">CC视频成功举办2013（第二届）中国<br/>远程教育技术创新与应用论坛</span>
</b>
</p>
<p class="history_L yearalmost">
<span class="history_2006_span yellow">2015</span>
<b class="history_2006_b yellow">
<span class="history_l_month">01<br/>月</span>
<span class="history_l_text full">视频直播CC Live发布</span>
</b>
</p>
</div>
<div class="history-img">
<img class="history_img" src="images/history.png" alt="">
</div>
<div class="history_right">
<p class="history_R history_r_2005">
<span class="history_2005_span">2005</span>
<b class="history_2005_b">
<span class="history_r_month">04<br/>月</span>
<span class="history_r_text">CC视频成立<br/>并入住北京大学留学生创业园</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span">2007</span>
<b class="history_2005_b">
<span class="history_r_month">12<br/>月</span>
<span class="history_r_text">获得国际著名投资商<br/>IDG VC投资 </span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span">2009</span>
<b class="history_2005_b">
<span class="history_r_month">01<br/>月</span>
<span class="history_r_text">整合Pocle和SupeV后<br/>推出CCVMS视频建站系统</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span">2009</span>
<b class="history_2005_b">
<span class="history_r_month">12<br/>月</span>
<span class="history_r_text">CC视频成为Google在大陆地<br/>区第一家视频广告合作伙伴</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span blue">2010</span>
<b class="history_2005_b blue_R">
<span class="history_r_month">10<br/>月</span>
<span class="history_r_text">CC视频推出基于视频云计算的<br/>第三方服务平台</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span blue">2011</span>
<b class="history_2005_b blue_R">
<span class="history_r_month">08<br/>月</span>
<span class="history_r_text">CC视频参展2011年（第十届）<br/>中国互联网大会</span>
</b>
</p>
<p class="history_R year211">
<span class="history_2005_span blue">2011</span>
<b class="history_2005_b blue_R">
<span class="history_r_month">11<br/>月</span>
<span class="history_r_text">CC视频荣获<br/>“最佳云服务模式奖”</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span yellow">2012</span>
<b class="history_2005_b yellow_R">
<span class="history_r_month">04<br/>月</span>
<span class="history_r_text">CC视频荣获<br/>“最佳视频服务提供商”</span>
</b>
</p>
<p class="history_R year211">
<span class="history_2005_span yellow">2012</span>
<b class="history_2005_b yellow_R">
<span class="history_r_month">10<br/>月</span>
<span class="history_r_text">CC视频荣获“清科集团中国<br/>最具投资价值50强”荣誉</span>
</b>
</p>
<p class="history_R yearalmostr">
<span class="history_2005_span yellow">2014</span>
<b class="history_2005_b yellow_R">
<span class="history_r_month">10<br/>月</span>
<span class="history_r_text">CC视频荣获<br/>“最佳教育技术提供商”荣誉</span>
</b>
</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<script src="js/jquery.slidy.js"></script>
<script>
$(window).scroll(function(){
var msg = $(".history-img");
var item = $(".history_L");
var items = $(".history_R");
var windowHeight = $(window).height();
var Scroll = $(document).scrollTop();
if((msg.offset().top - Scroll -windowHeight)<=0){
msg.fadeIn(1500);
}
for(var i=0;i<item.length;i++){
if(($(item[i]).offset().top - Scroll - windowHeight)<= -100){
$(item[i]).animate({marginRight:'0px'},'50','swing');
}
}
for(var i=0;i<items.length;i++){
if(($(items[i]).offset().top - Scroll - windowHeight)<= -100){
$(items[i]).animate({marginLeft:'0px'},'50','swing');
}
}});
</script>
</body>
</html>
JS代码(jquery.slidy.js):
(function($){
$.fn.Slide = function(options){
var opts = $.extend({
}
,$.fn.Slide.deflunt,options);
var index = 1;
var targetLi = $("." + opts.claNav + " li",$(this));
var clickNext = $("." + opts.claNav + " .next",$(this));
var clickPrev = $("." + opts.claNav + " .prev",$(this));
var ContentBox = $("." + opts.claCon,$(this));
var ContentBoxNum = ContentBox.children().size();
var slideH = ContentBox.children().first().height();
var slideW = ContentBox.children().first().width();
var autoPlay;
var slideWH;
if (opts.effect == "scroolY" || opts.effect == "scroolTxt"){
slideWH = slideH;
}
else if (opts.effect == "scroolX" || opts.effect == "scroolLoop"){
ContentBox.css("width",ContentBoxNum * slideW);
slideWH = slideW;
}
else if (opts.effect == "fade"){
ContentBox.children().first().css("z-index","1");
}
return this.each(function(){
var $this = $(this);
var doPlay = function(){
$.fn.Slide.effect[opts.effect](ContentBox,targetLi,index,slideWH,opts);
index++;
if (index * opts.steps >= ContentBoxNum){
index = 0;
}
}
;
clickNext.click(function(event){
$.fn.Slide.effectLoop.scroolLeft(ContentBox,targetLi,index,slideWH,opts,function(){
for (var i = 0;
i < opts.steps;
i++){
ContentBox.find("li:first",$this).appendTo(ContentBox);
}
ContentBox.css({
"left":"0"}
);
}
);
event.preventDefault();
}
);
clickPrev.click(function(event){
for (var i = 0;
i < opts.steps;
i++){
ContentBox.find("li:last").prependTo(ContentBox);
}
ContentBox.css({
"left":-index * opts.steps * slideW}
);
$.fn.Slide.effectLoop.scroolRight(ContentBox,targetLi,index,slideWH,opts);
event.preventDefault();
}
);
if (opts.autoPlay){
autoPlay = setInterval(doPlay,opts.timer);
ContentBox.hover(function(){
if (autoPlay){
clearInterval(autoPlay);
}
}
,function(){
if (autoPlay){
clearInterval(autoPlay);
}
autoPlay = setInterval(doPlay,opts.timer);
if ($("#Html5Video").attr('_isplaying')){
clearInterval(autoPlay);
}
}
);
}
targetLi.click(function(){
index = targetLi.index(this);
window.setTimeout(function(){
$.fn.Slide.effect[opts.effect](ContentBox,targetLi,index,slideWH,opts);
}
,10);
}
);
}
);
}
;
$.fn.Slide.deflunt ={
effect:"scroolY",autoPlay:true,speed:"normal",timer:1000,defIndex:0,claNav:"bannermenu",claCon:"caseul",steps:1}
;
$.fn.Slide.effectLoop ={
scroolLeft:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.animate({
"left":-i * opts.steps * slideW}
,opts.speed,callback);
if (navObj){
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
}
,scroolRight:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({
"left":0}
,opts.speed,callback);
}
}
$.fn.Slide.effect ={
fade:function(contentObj,navObj,i,slideW,opts){
contentObj.children().eq(i).stop().animate({
opacity:1}
,opts.speed).css({
"z-index":"1"}
).siblings().animate({
opacity:0}
,opts.speed).css({
"z-index":"0"}
);
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
,scroolTxt:function(contentObj,undefined,i,slideH,opts){
contentObj.animate({
"margin-top":-opts.steps * slideH}
,opts.speed,function(){
for (var j = 0;
j < opts.steps;
j++){
contentObj.find("li:first").appendTo(contentObj);
}
contentObj.css({
"margin-top":"0"}
);
}
);
}
,scroolX:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({
"left":-i * opts.steps * slideW}
,opts.speed,callback);
if (navObj){
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
}
,scroolY:function(contentObj,navObj,i,slideH,opts){
contentObj.stop().animate({
"top":-i * opts.steps * slideH}
,opts.speed);
if (navObj){
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
}
}
;
}
)(jQuery);
CSS代码(chinaz.css):
@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*--clearfix--*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/*--Hides from IE-mac--*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
body{font:14px '寰蒋闆呴粦',sans-serif;color:#333!important}
a{text-decoration:none;color:#5a5a5a;outline:0;blr:expression(this.onFocus=this.blur())}
.fl{float:left}
.fr{float:right}
.mr10{margin-right:10px}
.m20{margin-left:5%;_margin-left:4%;margin-right:5%;_margin-right:4%}
h4{font-size:18px;color:#797979}
.f12{font-size:14px;font-weight:bold}
h5{color:#5a5a5a;font-weight:bold;line-height:30px;font-size:14px}
.hbg{background:url(../images/bg.jpg) center top no-repeat;background-size:cover}
.login_w{background:rgba(0,143,181,0.5);line-height:40px;text-align:right}
.login_w .box{width:1000px;margin:0 auto}
.login_w a{color:#FFF}
.login{margin-left:20px}
#cc_video{width:100%;background:#000;display:block;position:absolute;top:72px;left:0}
#video_box{height:95%}
#close{background:url(../images/closev.gif) 0 0 no-repeat;position:absolute;right:10%;top:0;display:block;width:21px;height:21px;text-indent:-9999em}
#close:hover{background:url(../images/closev.gif) 0 -21px no-repeat}
.feature{width:800px;margin:0 auto;font-size:18px;line-height:200%;overflow:hidden}
.feature .box1,.feature .box2{height:200px;border-bottom:1px solid #f6f6f6}
.feature .box3{height:200px}
.feature .boderno{border:0}
.feature .box1 .img1,.feature .box3 .img3{height:190px;width:190px;position:relative;float:left}
#img11{position:absolute;left:0;top:0;z-index:1;opacity:0;opacity:1 \0}
#img12{position:absolute;left:0;top:0;z-index:2;opacity:0;opacity:1 \0}
.feature .box2{text-align:right}
.feature .box2 p{margin-right:230px}
.feature .box2 .img2{height:217px;width:202px;position:relative;float:right;margin-top:-20px}
#img21{position:absolute;left:0;top:0;z-index:2}
#img22{position:absolute;left:0;top:0;z-index:1;opacity:0;opacity:1 \0}
.feature h3{font-size:22px;margin:50px 0 10px 0;color:#666}
.feature p{margin-left:230px;color:#999}
#img31{position:absolute;left:0;top:0;z-index:2;opacity:0;opacity:1 \0}
#img32{position:absolute;left:0;top:0;z-index:1;opacity:0;opacity:1 \0}
.animation11{-webkit-animation:fadeInLeft 1s .7s ease both;-moz-animation:fadeInLeft 1s .7s ease both}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
.animation12{-webkit-animation:bounceInLeft 1s .2s ease both;-moz-animation:bounceInLeft 1s .2s ease both}
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translate(-2000px,2000px)}
60%{opacity:1;-webkit-transform:translate(30px,-30px)}
80%{-webkit-transform:translate(-10px,10px)}
100%{-webkit-transform:translate(0,0);opacity:1}
}
@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px)}
60%{opacity:1;-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0);opacity:1}
}
.animation13{-webkit-animation:fadeInRight 1s .2s ease both;-moz-animation:fadeInRight 1s .2s ease both}
@-webkit-keyframes fadeInRight{0%{-webkit-transform:translateX(20px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{0%{-moz-transform:translateX(20px)}
100%{-moz-transform:translateX(0)}
}
.animation21{-webkit-animation:pulse 1.5s .2s ease both;-moz-animation:pulse 1.5s .2s ease both}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.3)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes pulse{0%{-moz-transform:scale(1)}
50%{-moz-transform:scale(1.3)}
100%{-moz-transform:scale(1)}
}
.animation22{-webkit-animation:rotateIn 1.5s .2s ease both;-moz-animation:rotateIn 1.5s .2s ease both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0}
100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
}
.animation23{-webkit-animation:fadeInLeft2 1s .2s ease both;-moz-animation:fadeInLeft2 1s .2s ease both}
@-webkit-keyframes fadeInLeft2{0%{-webkit-transform:translateX(-20px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft2{0%{-moz-transform:translateX(-20px)}
100%{-moz-transform:translateX(0)}
}
.animation31{-webkit-animation:bounceIn 1.5s .2s ease both;-moz-animation:bounceIn 1.5s .2s ease both}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}
50%{opacity:1;-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1);opacity:1}
}
.animation32{-webkit-animation:rotateIn 1s .2s ease both;-moz-animation:rotateIn 1s .2s ease both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-300deg);opacity:0}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-300deg);opacity:0}
100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
}
.case{height:122px;padding:30px 0 30px 0;margin:50px auto 0;border-top:1px solid #f1f1f1;clear:both}
.case ul{position:relative}
.case li{text-align:center;position:absolute;width:100%}
.reg{height:100px;background:#00a2ca;text-align:center;font-size:28px;color:#FFF;padding:70px 0}
.reg a{display:block;cursor:pointer;width:150px;height:45px;line-height:45px;text-align:center;border:2px solid #FFF;background:#00a2ca;background:transparent;font-size:22px;color:#FFF;margin:30px auto}
.reg a:hover{background:#FFF;color:#00a2ca;transition:all .2s linear;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear}
section{background:#f2f2f2;position:relative}
.main{width:980px;margin:0 auto;*z-index:9999;position:relative}
.tit{height:50px;line-height:48px;padding:0 19px;color:#606060}
.tit a{color:#39F}
.tit em{margin-right:5px;font-size:14px}
.main_srv{border:1px solid #dbdbdb;background:#FFF;margin-bottom:60px}
.nav_l{width:200px;float:left}
.nav_l li{line-height:50px;font-size:14px;border-bottom:1px solid #dbdbdb}
.nav_l li a{display:block;padding-left:64px;color:#808080}
.nav_l li a:hover{color:#ff7519}
.nav_l .hover{background:#FFF url(../images/nav_srv_l.gif) left repeat-y;color:#ff7519;font-weight:bold;border-right:1px solid #FFF;position:relative;margin-right:-1px}
.icosrv_1,.icosrv_2,.icosrv_3,.icosrv_4,.icosrv_5,.icosrv_6,.icosrv_7,.icosrv_8,.icosrv_9,.icosrv_10,.icosrv_11,.icosrv_1:hover,.icosrv_2:hover,.icosrv_3:hover,.icosrv_4:hover,.icosrv_5:hover,.icosrv_6:hover,.icosrv_7:hover,.icosrv_8:hover,.icosrv_9:hover,.icosrv_10:hover,.icosrv_11:hover{background:url(../images/bgnav_ico.gif) no-repeat;margin-left:28px}
.icosrv_1{background-position:0 0}
.icosrv_2{background-position:0 -50px}
.icosrv_3{background-position:0 -100px}
.icosrv_4{background-position:0 -150px}
.icosrv_5{background-position:0 -200px}
.icosrv_6{background-position:0 -497px}
.icosrv_7{background-position:0 -547px}
.icosrv_8{background-position:0 -597px}
.icosrv_9{background-position:0 -150px}
.icosrv_10{background-position:0 -200px}
.icosrv_11{background-position:0 -796px}
.sel_nav_l .icosrv_1{background-position:0 -250px;color:#ff7519}
.sel_nav_l .icosrv_2{background-position:0 -300px;color:#ff7519}
.sel_nav_l .icosrv_3{background-position:0 -350px;color:#ff7519}
.sel_nav_l .icosrv_4{background-position:0 -400px;color:#ff7519}
.sel_nav_l .icosrv_5{background-position:0 -450px;color:#ff7519}
.sel_nav_l .icosrv_6{background-position:0 -646px;color:#ff7519}
.sel_nav_l .icosrv_7{background-position:0 -696px;color:#ff7519}
.sel_nav_l .icosrv_8{background-position:0 -746px;color:#ff7519}
.sel_nav_l .icosrv_9{background-position:0 -400px;color:#ff7519}
.sel_nav_l .icosrv_10{background-position:0 -450px;color:#ff7519}
.sel_nav_l .icosrv_11{background-position:0 -846px;color:#ff7519}
.icosrv_1:hover{background-position:0 -250px}
.icosrv_2:hover{background-position:0 -300px}
.icosrv_3:hover{background-position:0 -350px}
.icosrv_4:hover{background-position:0 -400px}
.icosrv_5:hover{background-position:0 -450px}
.icosrv_6:hover{background-position:0 -646px}
.icosrv_7:hover{background-position:0 -696px}
.icosrv_8:hover{background-position:0 -746px}
.icosrv_9:hover{background-position:0 -400px}
.icosrv_10:hover{background-position:0 -450px}
.icosrv_11:hover{background-position:0 -846px}
.main_r{margin-left:200px;border-left:1px solid #dbdbdb;color:#5a5a5a;min-height:700px}
h2{font-size:30px;margin:0 50px 0;padding:33px 0 22px;color:#ff7519;border-bottom:1px solid #dbdbdb}
.k_art,.k_art_ser{margin:0 6% 90px;color:#808080}
.pic_tit{margin:30px 0}
.plat_art{float:left;width:30%;margin:0 1%}
.plat_art ul{width:100%;height:128px;font-size:14px;margin-top:10px}
.plat_art li{line-height:24px;padding-left:10px;background:url(../images/small_k.gif) left 11px no-repeat}
.k_art_ser p{line-height:30px;margin:20px 0;color:#5a5a5a;font-size:14px}
.pic_kart img{border:1px solid #dbdbdb;padding:20px 25%}
.pic_kart_k img{border:1px solid #dbdbdb;padding:20px 20%}
.kk_art{padding:20px 20px 0}
.app_art,.app_art_a{padding:30px 0;position:relative}
.app_art{color:#808080}
.app_art h3{font-size:30px;color:#5a5a5a;line-height:60px}
.app_art li,.app_art_a li{font-size:14px;line-height:34px}
.pos_ab{position:absolute;top:8%;left:52%;font-size:16px;color:#F00;font-weight:bold}
.app_art_a .fl{width:45%}
.app_art_a .fr{width:40%}
.app_art_a .fr img{width:100%}
.app_art_br{padding:0;margin:0 10px;border-top:1px solid #dbdbdb;border-bottom:1px solid #dbdbdb}
.app_art_br_m{padding:30px 13px;float:left}
.app_art_br_m ul{margin-top:10px}
.app_art_br_m li{font-size:14px;line-height:24px;background:url(../images/dian.gif) no-repeat left 12px;padding-left:10px}
.app_art_ft{margin:34px 10px 20px 10px}
.app_art_ft a{margin:10px 20px 10px 0;display:inline-block;zoom:1}
.app_art_ft a img{border:1px solid #d5d5d5}
.flw{width:300px}
.app{padding:20px 0}
.app li{float:left;width:75px;margin:10px 30px}
.app li p{text-align:center}
.main_r_tit{height:50px}
.main_r_tit li{float:left;padding:0 20px;height:50px;font-size:14px;line-height:50px;text-align:center;font-weight:bold;display:block}
.main_r_tit li a:hover{color:#ff7519}
#tags li.selecttag{background:url(../images/sj.jpg) no-repeat center bottom;position:relative;margin-bottom:-1px;height:51px;z-index:1}
#tags li.selecttag a{color:#ff7519}
#tagcontent{position:relative}
.tagcontent{border-top:1px solid #ededed;padding-top:10px;display:none}
.tagcontent p{line-height:30px;color:#5a5a5a;font-size:14px}
.pic_us{padding-top:20px;margin-top:20px;display:block;height:30%}
.vid_box{position:relative;width:80%;height:350px;display:block;margin-bottom:20px}
#tagcontent div.selecttag{display:block}
.pic_l{margin:10px 25px}
.pic_l li{background:url(../images/bgl.gif) repeat-y top left;padding-left:50px;line-height:58px;line-height:59px \0;_padding-top:1px;font-size:14px}
.tit_tabcon{margin-top:10px;height:30px;line-height:30px}
.tit_tabcon li{color:#5a5a5a;font-size:14px;float:left;padding:0 10px 0 13px;background:url(../images/dian_1.gif) no-repeat left 10px}
.pic_gs{padding:20px 0}
.main_med li a{line-height:30px;color:#5a5a5a;background:url(../images/dian_03.gif) left center no-repeat;padding-left:10px;margin-left:10px;font-size:14px}
.main_med li a:hover{color:#39F}
.main_med span{margin-left:30px;color:#999}
.hov_shadow{background:url(../images/bglinner.jpg) no-repeat left top}
.pic_us_x{margin:30px 5px 0;background:url(../images/li_x.gif) no-repeat left top}
.sp{padding:30px 0;position:relative}
.sp p{line-height:30px}
.sp h3{font-size:14px;font-weight:bold;color:#5a5a5a;line-height:30px}
.sp h3 img{position:relative;left:5px;top:3px}
.pic_us_xx{background:url(../images/li_x.gif) no-repeat left top}
.sp_bg{background:url(../images/sm_bg1.gif) left bottom no-repeat;float:left;padding-bottom:11px;_padding-bottom:11px}
.sp_bg_n{display:none}
.sp_pic_01{background:url(../images/sp_03.jpg) no-repeat}
.sp_pic_02{background:url(../images/sp_06.jpg) no-repeat}
.sp_pic_03{background:url(../images/sp_03_03.jpg) no-repeat}
.sp_pic_04{background:url(../images/sp_03_07.jpg) no-repeat}
.sp_pic_05{background:url(../images/sp_03_05.jpg) no-repeat}
.sp_pic_01,.sp_pic_02,.sp_pic_03,.sp_pic_04,.sp_pic_05{border:1px solid #dbdbdb;width:284px;height:193px;display:block}
.sp_pic_01:hover,.sp_pic_02:hover,.sp_pic_03:hover,.sp_pic_04:hover,.sp_pic_05:hover{background-position:0 -193px}
.main_sp{margin-left:20px;width:53%;float:left}
.main_sp a{color:#39F}
.pic_us_xx{background:url(../images/li_x.gif) no-repeat left top}
.use_art{margin:25px 50px;line-height:30px}
#overlay{background:#000;opacity:.6;filter:alpha(opacity=60);width:100%;height:100%;position:absolute;top:0;left:0;z-index:999999;display:none}
#v_box,#v_box2,#v_box3,#v_box4,#v_box5{position:fixed;_position:absolute;top:50%;left:50%;margin:-245px 0 0 -375px;z-index:99999999;display:none}
.close_v{background:url(../images/close.gif) no-repeat 0 0;width:15px;height:15px;display:block;text-indent:-9999em;position:absolute;right:-15px;top:-15px;z-index:999999999;overflow:hidden}
.close_v:hover{background-position:0 -15px}
.team_art{margin:25px 18px;clear:both}
.box_pic{margin:18px 17px;_margin:18px 15px;float:left;position:relative;overflow:hidden}
.boxcaption{float:left;display:inline;position:absolute;left:0;background:#000;height:69px;width:199px;opacity:.7;filter:Alpha(style=1,opacity=70,finishOpacity=100,startX=0,finishX=0,startY=0,finishY=0);font-size:24px;text-align:center;color:#FFF;line-height:69px;top:-69px;overflow:hidden}
.boxcaption:hover{color:#FFF;width:199px;height:69px}
footer{background:#333;color:#FFF;padding:30px 0 30px 0}
footer a{color:#FFF}
footer .box{width:1000px;margin:0 auto;position:relative}
footer ul{float:left;margin:20px 20px 10px 50px}
footer ul li{margin-bottom:10px}
footer .license{margin:0 20px;line-height:30px;padding-left:30px}
footer .license a{margin-right:10px}
footer .pic{position:absolute;bottom:3px;left:0}
.agree_box{text-align:center}
.ico{position:absolute;right:0;bottom:0}
.ico a{margin-left:20px;color:#FFF;float:left}
.ico_xl{background:url(../images/weibo1.png) no-repeat;display:block;width:30px;height:30px;text-indent:-9999px}
.ico_wx{background:url(../images/ico_wx.png) no-repeat;display:block;width:30px;height:30px;text-indent:-9999px}
#wxico{position:absolute;bottom:0;right:-100px;z-index:2}
.lobox{position:absolute;right:0;top:30px;color:#FFF}
.lobox a{color:#FFF;margin:0 5px}
.header{width:100%;height:72px;background:#d43434;border-bottom:2px solid #be1616;padding:0 20px;box-sizing:border-box;text-align:center;line-height:72px;z-index:111}
.header_top{width:1000px;height:72px;display:block;margin:0 auto}
.logo,.nav,.tel,.log{display:inline-block;float:left}
.logo{width:160px;height:72px}
.logo_img{margin-top:14px}
.nav_li{float:left;width:110px;position:relative}
.nav_li__a{color:#FFF;font-size:16px;display:block;width:100%;height:100%;text-align:center}
.tel{width:auto;color:#FFF;margin-left:50px}
.log_ul{width:auto;margin-left:25px}
.log_ul__li{float:left;margin-left:10px}
.log_ul__li___a{color:#FFF}
.nav_second{background:#d43434;display:none;padding:3px 0 8px;position:absolute;top:72px;*+left:0;z-index:11111}
.nav_second__li{line-height:35px;width:110px;text-align:center}
.nav_second__a{color:#FFF;width:100%}
.nav_second__a:hover{color:#fcd1d1}
.foot{width:100%;height:150px;background:#d43434;text-align:center;padding:90px 0 0}
.banner{width:100%;height:auto;margin:0;padding:0;line-height:0;font-size:0;display:block;clear:both;overflow:hidden;background:url("../images/banner.jpg") top center no-repeat;background-color:#d0937a}
.wrapper{clear:both}
.banner1{width:100%;height:auto;margin:0;padding:0;line-height:0;font-size:0;display:block;overflow:hidden;background:url("../images/banner.jpg") top center no-repeat;background-color:#d0937a}
.banner_ten{width:100%;height:300px;margin:160px auto 0;background:url("../images/banner_ten.png") center repeat-x}
.ten_inner{width:1000px;margin:0 auto;height:100%}
.ten_banner_img{float:left;width:35%;margin-left:5%;margin-top:30px;_margin:0;_margin-top:30px;height:195px;background:url("../images/sprites.png");background-position:50px -320px}
.banner_text{float:left;width:60%;height:195px;_margin-left:20px;margin-top:10px}
.banner_text__h1{font-size:42px;*+font-size:32px;color:#FFF;display:block;margin-top:30px;*+margin-top:30px;font-weight:500}
.banner_text__h2{font-size:30px;*+font-size:26px;color:#FFF;display:block;margin-top:60px;*+margin-top:45px;font-weight:500}
.banner_text__p{color:#FFF;display:block;font-size:18px;width:98%;padding-left:2%;height:85px;margin-top:35px;*+margin-top:30px;line-height:28px;z-index:111}
.banner_line{float:right;color:#FFF;height:75px;margin-top:110px;width:1px;_width:2px;border-left:1px solid #FFF}
.ten_img{width:100%;height:auto}
.ten_a{display:block;width:175px;height:40px;line-height:40px;font-size:22px;color:#FFF;text-align:center;border-radius:5px;border:1px solid #FFF;margin:35px auto 0;z-index:55555;float:left}
.ten_a:hover{background:#ff9c9c}
.present{width:100%;height:180px;background:url("../images/present.png") no-repeat center}
.present_info{width:1000px;height:180px;margin:0 auto}
.present_info__ul{float:left;width:390px;height:170px}
.share_has{width:140px;height:35px;display:block;margin-top:5px;margin-left:20px;background:url("../images/sprites.png");background-position:0 -200px}
.present_li__span{display:block;width:100%;height:20px;color:#FFF;font-size:12px;line-height:20px;text-align:center;margin-top:4px}
.present_info__li{float:left;margin-left:10px;width:120px;height:130px;background:url("../images/sprites.png");background-position:5px 0}
.present_info__li img{margin-left:6px}
.share_wb{float:left;width:600px;padding-left:10px;margin-top:36px;display:block}
.share_wb__p{color:#FFF;font-size:14px;line-height:26px}
.ccday{color:#f9d602}
.ccwb{color:#ac1306}
.share_wb__a{display:block;width:193px;height:53px;font-size:16px;color:#FFF;text-align:center;line-height:53px;font-weight:500;background:url("../images/sprites.png");background-position:0 -250px;margin-left:150px}
.history{width:100%;height:2200px;position:relative;background:url("../images/history_bg.png") center no-repeat}
.start-history{width:1000px;height:2200px;margin:30px auto;text-align:center;background:url("../images/history_start.png") no-repeat top center;display:block}
.cc_history{color:#2b2b2b;font-size:36px;font-weight:400;display:block;padding-top:43px}
.next_history{color:#bbb;font-size:26px;width:160px;margin:0 auto;border-bottom:1px solid #d1d1d1}
.history-img{height:2050px;width:130px;overflow:hidden;float:left;margin-top:24px;margin-left:8px}
.history_mid{width:1000px;height:auto;margin:0 auto;background:0}
.history_left{width:431px;height:2050px;float:left;clear:left;position:relative;overflow:hidden}
.history_right{width:431px;height:2050px;float:left;position:relative;overflow:hidden}
.history_R{width:420px;height:100px;margin-left:500px}
.history_L{width:420px;height:100px;float:right;margin-right:500px}
.history_r_2005{margin-top:157px}
.history_2007{width:420px;height:100px;background:#FFF;margin-top:73px}
.history_2005_span{float:left;line-height:100px;font-size:42px;color:#d43434}
.history_2005_b{width:280px;height:58px;float:left;margin-top:21px;background:url("../images/sprites.png") center;background-position:0 -1300px}
.history_r_month{float:left;color:#FFF;display:block;width:30px;line-height:25px;height:58px;border-right:1px solid #FFF;margin-left:25px}
.history_r_text{float:left;font-size:14px;color:#FFF;display:block;height:58px;line-height:25px;padding-left:5px;text-align:left}
.year2006{margin-top:242px}
.year2009{margin-top:65px}
.year2011{margin-top:53px}
.year211{margin-top:43px}
.year2013{margin-top:62px}
.yearalmost{margin-top:73px}
.yearalmostr{margin-top:70px}
.history_2008{width:420px;height:100px;background:#FFF;margin-top:73px;float:right}
.history_2011{width:420px;height:100px;background:#FFF;margin-top:43px;float:right}
.history_2006_span{float:right;line-height:100px;font-size:42px;color:#d43434}
.history_2006_b{width:280px;height:58px;float:right;margin-top:21px;background:url("../images/sprites.png") center;background-position:0 -1200px}
.blue{background-position:0 -1400px!important}
.blue_R{background-position:0 -1500px!important}
.yellow{background-position:0 -1600px!important}
.yellow_R{background-position:0 -1700px!important}
.history_l_month{float:right;color:#FFF;display:block;width:30px;line-height:25px;height:58px;border-left:1px solid #FFF;margin-right:37px}
span.blue{color:#37779d}
span.yellow{color:#f76d02}
.history_l_text{float:left;font-size:14px;color:#FFF;display:block;height:58px;line-height:25px;padding-top:3px;width:202px;text-align:right;padding-right:5px}
.smalltext{font-size:12px;line-height:18px}
.smalltxt{font-size:12px}
.sharesite{width:110px;height:auto;position:fixed;right:0;top:20%;z-index:111}
.sharesite_ul{width:110px;margin:0}
.sharesite_first{height:180px;position:relative}
.share_second{margin:0!important}
.share_li__firsta{width:80px;height:25px;display:block;text-align:center;color:#FFF;position:absolute;bottom:13px;margin-left:15px}
.share_img{display:block;margin-left:12px}
.share_ul__li{margin-top:10px}
.full{line-height:53px}
分享到QQ
分享到微博
微信扫一扫
