以下是 jQuery左右轮播焦点图特效轮播滚动切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery左右轮播焦点图特效</title>
<style>
*{margin:0;padding:0;}
</style>
<link rel="stylesheet" type="text/css" href="rucnews/style.css" />
<link rel="stylesheet" type="text/css" href="css/slide-2.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#s').focusin(function(){
var val = $(this).val();
if(val == '请输入搜索内容...'){
$(this).val('');
}
});
$('#s').focusout(function(){
var val = $(this).val();
if(val == ''){
$(this).val('请输入搜索内容...');
}
});
$('#weeknews_triger').click(function(){
$('#weeknews').animate({
height: '293'
});
$('#medianews').animate({
height: '40'
});
});
$('#medianews_triger').click(function(){
$('#weeknews').animate({
height: '40'
});
$('#medianews').animate({
height: '293'
});
});
$('.link2home').hover(function(){
$(this).css('background-position','0 -30px');
$('body').animate({backgroundPosition: '0 0'});
$('#header_top_nav a').hide();
$('#header_top_nav a.more').show();
$('#header_top_nav').animate({height: 20});
});
$('.imp_news').hover(function(){
$('body').animate({backgroundPosition: '0 0'});
$('#header_top_nav a').hide();
$('#header_top_nav a.inews').show();
$('#header_top_nav').animate({height: 20});
});
$('.camp_news').hover(function(){
$('body').animate({backgroundPosition: '0 0'});
$('#header_top_nav a').hide();
$('#header_top_nav a.cnews').show();
$('#header_top_nav').animate({height: 20});
});
$('#slides').slides({
preload: true,
preloadImage: 'images/ajax-loader.gif',
effect: 'slide',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:0,
right: 40,
opacity: 0
},200);
},
animationComplete: function(current){
$('.caption').animate({
bottom:20,
right: 40,
opacity: 1
},200);
},
slidesLoaded: function() {
$('.caption').animate({
bottom:20,
right: 40,
opacity: 1
},200);
}
});
$('#wrapper').bind("mouseleave",function(){
$('#header_top_nav').animate({height: 0});
$('body').animate({backgroundPosition: '0 -20px'});
});
});
</script>
</head>
<body>
<div class="ca1_slide" style="padding-left:350px;">
<div id="slider-wrapper">
<div id="slider-bg">
<div id="slider-photos">
<div id="slides">
<div class="slides_container">
<div class="slide">
<img src="images/11111.jpg" width="700" height="300" alt="第十八届全国大学生网球锦标赛暨全国高校“校长杯”网球比赛开幕"/>
<div class="caption" style="bottom:0">
<h1><a href="#" style="text-decoration:none;font-size:12px;">第十八届全国大学生网球锦标赛暨全国高校“校长杯”网球比赛开幕</a></h1>
</div>
</div>
<div class="slide">
<img src="images/big1.jpg" width="700" height="300" alt="第十三届全国大学生田径锦标赛开幕 人大学子男子百米专业组夺冠"/>
<div class="caption" style="bottom:0">
<h1><a href="#" style="text-decoration:none;font-size:12px;">第十三届全国大学生田径锦标赛开幕 人大学子男子百米专业组夺冠</a></h1>
</div>
</div>
<div class="slide">
<img src="images/777.jpg" width="700" height="300" alt=""/>
<div class="caption" style="bottom:0">
<h1><a href="#" style="text-decoration:none;font-size:12px;">新闻学院开展赴山东诸城、湖南中方“新闻学子走基层”学习实践活动</a></h1>
</div>
</div>
<div class="slide">
<img src="images/22.jpg" width="700" height="300" alt="人大成立中国共产党历史与理论研究院 9名专家受聘任学术顾问"/>
<div class="caption" style="bottom:0">
<h1><a href="#" style="text-decoration:none;font-size:12px;">人大成立中国共产党历史与理论研究院 9名专家受聘任学术顾问</a></h1>
</div>
</div>
</div>
<a href="#" class="prev"><img src="images/arrow-prev.png" width="30" height="70" alt="Arrow Prev" border="0"></a>
<a href="#" class="next"><img src="images/arrow-next.png" width="30" height="70" alt="Arrow Next" border="0"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>JS代码(slide.js):
/** Slides,A Slideshow Plugin for jQuery* Intructions:http://slidesjs.com* By:Nathan Searles,http://nathansearles.com* Version:1.1.9* Updated:September 5th,2011** Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
(function(a){
a.fn.slides=function(b){
return b=a.extend({
}
,a.fn.slides.option,b),this.each(function(){
function w(g,h,i){
if(!p&&o){
p=!0,b.animationStart(n+1);
switch(g){
case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;
break;
case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;
break;
case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}
h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({
zIndex:10}
).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
b.autoHeight?d.animate({
height:d.children(":eq("+k+")",c).outerHeight()}
,b.autoHeightSpeed,function(){
d.children(":eq("+l+")",c).css({
display:"none",zIndex:0}
),d.children(":eq("+k+")",c).css({
zIndex:0}
),b.animationComplete(k+1),p=!1}
):(d.children(":eq("+l+")",c).css({
display:"none",zIndex:0}
),d.children(":eq("+k+")",c).css({
zIndex:0}
),b.animationComplete(k+1),p=!1)}
):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){
b.autoHeight?d.animate({
height:d.children(":eq("+k+")",c).outerHeight()}
,b.autoHeightSpeed,function(){
d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}
):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}
),b.animationComplete(k+1),p=!1}
):(d.children(":eq("+k+")").css({
left:r,display:"block"}
),b.autoHeight?d.animate({
left:g,height:d.children(":eq("+k+")").outerHeight()}
,b.slideSpeed,b.slideEasing,function(){
d.css({
left:-f}
),d.children(":eq("+k+")").css({
left:f,zIndex:5}
),d.children(":eq("+l+")").css({
left:f,display:"none",zIndex:0}
),b.animationComplete(k+1),p=!1}
):d.animate({
left:g}
,b.slideSpeed,b.slideEasing,function(){
d.css({
left:-f}
),d.children(":eq("+k+")").css({
left:f,zIndex:5}
),d.children(":eq("+l+")").css({
left:f,display:"none",zIndex:0}
),b.animationComplete(k+1),p=!1}
)),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}
}
function x(){
clearInterval(c.data("interval"))}
function y(){
b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){
clearTimeout(c.data("pause")),v=setInterval(function(){
w("next",i)}
,b.play),c.data("interval",v)}
,b.pause),c.data("pause",u)):x()}
a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');
var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;
if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
o=!0,b.slidesLoaded()}
),a("."+b.next+",."+b.prev).fadeOut(0),!1;
if(e<2)return;
h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({
overflow:"hidden",position:"relative"}
),d.children().css({
position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}
),d.css({
position:"relative",width:f*3,height:g,left:-f}
),a("."+b.container,c).css({
display:"block"}
),b.autoHeight&&(d.children().css({
height:"auto"}
),d.animate({
height:d.children(":eq("+h+")").outerHeight()}
,b.autoHeightSpeed));
if(b.preload&&d.find("img:eq("+h+")").length){
a("."+b.container,c).css({
background:"url("+b.preloadImage+") no-repeat 50% 50%"}
);
var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();
a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){
d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){
a(this).css({
zIndex:5}
),a("."+b.container,c).css({
background:""}
),o=!0,b.slidesLoaded()}
)}
)}
else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){
o=!0,b.slidesLoaded()}
);
b.bigTarget&&(d.children().css({
cursor:"pointer"}
),d.children().click(function(){
return w("next",i),!1}
)),b.hoverPause&&b.play&&(d.bind("mouseover",function(){
x()}
),d.bind("mouseleave",function(){
y()}
)),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){
a.preventDefault(),b.play&&y(),w("next",i)}
),a("."+b.prev,c).click(function(a){
a.preventDefault(),b.play&&y(),w("prev",i)}
),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){
a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++}
)):a("."+b.paginationClass+" li a",c).each(function(){
a(this).attr("href","#"+m),m++}
),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){
return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}
),a("a.link",c).click(function(){
return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}
),b.play&&(v=setInterval(function(){
w("next",i)}
,b.play),c.data("interval",v))}
)}
,a.fn.slides.option={
preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){
}
,animationComplete:function(){
}
,slidesLoaded:function(){
}
}
,a.fn.randomize=function(b){
function c(){
return Math.round(Math.random())-.5}
return a(this).each(function(){
var d=a(this),e=d.children(),f=e.length;
if(f>1){
e.hide();
var g=[];
for(i=0;
i<f;
i++)g[g.length]=i;
g=g.sort(c),a.each(g,function(a,c){
var f=e.eq(c),g=f.clone(!0);
g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()}
)}
}
)}
}
)(jQuery)CSS代码(slide-2.css):
#slider-wrapper{position:relative;width:700px;height:334px;}
#slider-bg{background:url("../images/carbon-bg.png") repeat scroll 0 0 transparent;background-color:#000;height:334px;width:700px;}
#slider-photos{height:334px;position:absolute;width:700px;}
#slides{left:0;position:absolute;top:0;z-index:100;}
.slides_container{display:none;overflow:hidden;position:relative;width:700px;}
.entry .slides_container{width:600px;}
.slides_container div.slide{display:block;height:300px;width:700px;}
#slides .next,#slides .prev{display:block;height:70px;left:0;position:absolute;top:146px;width:30px;z-index:101;}
#slides .next{left:670px;}
a.portfolio-slide-prev,a.portfolio-slide-next{}
.pagination{margin:0 auto;width:120px;height:34px;}
.pagination li{float:left;list-style:none outside none;margin:0 3px;padding:0;height:14px;padding-top:10px;}
.pagination li a{background:url("../images/slider-pagination.png") repeat scroll 0 -14px transparent;display:block;float:left;height:0;overflow:hidden;padding-top:14px;width:14px;}
.pagination li.current a{background:url("../images/slider-pagination.png") repeat scroll 0 0 transparent;}
.caption{border-radius:2px 2px 2px 2px;bottom:0;box-shadow:0 0 2px 2px rgba(0,0,0,0.1);color:#FFFFFF;position:absolute;right:70px;text-shadow:0 1px 1px rgba(0,0,0,0.3);z-index:500;}
.caption h1{background:none repeat scroll 0 0 #E40404;margin:0;opacity:1;padding:10px 20px;text-transform:uppercase;max-width:600px;width:300px;}
.caption h1 a{font-family:"����";color:#fff;font-size:16px;font-weight:normal;}
.caption p{background:none repeat scroll 0 0 rgba(0,0,0,0.5);padding:10px 20px;width:300px;}
.caption p a{-moz-transition:all 0.2s ease-in 0s;border-bottom:1px solid transparent;color:#DDDDDD;font-size:12px;}
.caption p a:hover{border-bottom:1px solid #FFFFFF;color:#FFFFFF;}
CSS代码(style.css):
/*Theme Name:RUC NEWS WebsiteTheme URI:http://www.ruc.edu.cnAuthor:Shekarau Shen,Zubairu FanDescription:New Website for RUC.Version:2.1Tags:RUC*/
/*YUI 3.5.1 (build 22)Copyright 2012 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
a{text-decoration:none;}
body{font-family:Arial,Verdana,sans-serif,"����";font-weight:normal;background-color:#000;background-position:center -20px;}
#wrapper{width:960px;min-height:600px;margin-left:auto;margin-right:auto;}
#header_top_nav{width:960px;height:0;float:left;}
#header_top_nav a{height:20px;float:right;color:#CCB18D;font-size:12px;line-height:24px;margin-left:10px;display:none;}
#header_top_nav a.homepage{color:#fff;}
#header_top_nav a:hover{color:#fff;}
#header_top_nav a.dist{margin-right:480px;}
#header_top_nav a.dist2{margin-right:350px;}
#header{width:960px;height:100px;float:left;margin-top:4px;}
.header_left{width:275px;height:100px;float:left;}
.logo{width:275px;height:50px;float:left;}
.logo_bg{width:275px;height:50px;float:left;background:url(images/rucnews-logo-bg.png) no-repeat;}
.searchbox{width:200px;height:24px;float:right;margin-top:27px;margin-right:54px;}
.searchbox input.inputtext{width:160px;height:24px;float:left;border:none;padding:0 30px 0 10px;background:url(images/searchbox_bg.png) no-repeat 0 0;color:#AB8A6C;font-size:14px;line-height:24px;}
.searchbox input.submit{float:left;width:24px;height:24px;margin-left:-24px;}
.searchbox input:focus{background-position:0 -24px;color:#593939;}
.searchbox span{width:160px;height:20px;float:left;font-size:12px;line-height:20px;color:#AB8A6C;margin:5px 0 0;}
.header_mid{float:left;height:100px;width:354px;}
.header_top_nav_item,.header_bottom_nav_item{width:118px;height:50px;float:left;}
.header_top_nav_item{background:url(images/headernav-trans-bg.png) no-repeat;background-position:top right;}
.header_top_nav_item a{width:110px;height:50px;float:left;font-size:14px;line-height:40px;text-align:right;color:#593939;}
.header_bottom_nav_item a{width:110px;height:50px;float:left;font-size:14px;line-height:20px;text-align:right;color:#CCB18D;font-family:"Microsoft Yahei";}
.header_top_nav_item a:hover,.header_bottom_nav_item a:hover{font-weight:700;}
.imp_news{background-color:#AB8A6C;}
.spec_news{background-color:#CCB18E;}
.camp_news{background-color:#AB8A6C;}
.header_right{width:331px;height:100px;float:right;}
.links{width:331px;height:50px;float:left;background:url(images/links-bg.png) no-repeat;}
.links ul{width:300;height:30px;float:right;margin-right:4px;margin-top:5px;}
.links ul li{display:inline;float:right;height:30px;}
.links ul li.sprite{margin:0 4px;font-size:14px;line-height:30px;}
.links ul li a{float:left;height:30px;font-size:12px;line-height:30px;color:#593939;}
.links ul li a.link2home{width:30px;height:30px;background:url(images/home.png) no-repeat;text-indent:-10000px;margin:0 10px;cursor:pointer;}
.links ul li a.link2home:hover{background-position:0 -30px;}
.links ul li a:hover{color:#FFFBEE;}
.rss-contribution{width:280px;height:50px;float:right;padding-right:9px;border-right:1px solid #CCB18E;}
.rss-contribution a{width:140px;height:50px;float:left;background:url(images/rss-contribution.png) 0 0 no-repeat;}
.rss-contribution a.contribution:hover{background-position:0 -50px;}
.rss-contribution a.rss{background-position:-140px 0;}
.rss-contribution a.rss:hover{background-position:-140px -50px;}
#content{width:960px;float:left;background-color:#FFFBEE;}
.ca_title{height:20px;float:left;margin:20px 0 10px 0;border-left:3px solid #593939;font-size:16px;line-height:20px;color:#593939;font-family:"Microsoft Yahei";padding-left:10px;}
.content_area_1{width:958px;height:334px;float:left;border:1px solid #CCB18E;background-color:#FFFBEE;}
.ca1_hot{width:258px;height:334px;float:left;overflow:hidden;}
.ca1_hot_item{width:220px;height:293px;padding:0 19px;float:left;border-bottom:1px solid #CCB18E;overflow:hidden;}
.ca1_hot_item_no_border{border:none;padding:0;}
.ca1_hot_item span.title{width:80px;height:20px;text-align:right;font-size:14px;line-height:20px;font-family:"Microsoft Yahei";color:#593939;float:right;margin-top:10px;margin-right:-10px;cursor:pointer;background:url(images/hot-title-bg.png) no-repeat;}
.ca1_hot_item span.title_media{background-position:0 -20px;}
.ca1_hot_item span.title_2{width:210px;height:20px;text-align:left;font-size:14px;line-height:20px;font-family:"Microsoft Yahei";color:#593939;float:left;margin-top:10px;border-left:3px solid #593939;cursor:pointer;padding-left:5px;}
.ca1_hot_item ul.ca1_hot_item_t3{width:220px;height:155px;margin:10px 0;float:left;border-bottom:1px dotted #CCB18E;}
.ca1_hot_item ul.ca1_hot_item_t3 li{float:left;width:220px;margin-bottom:10px;}
.ca1_hot_item ul.ca1_hot_item_t3 li span{width:40px;height:40px;float:left;text-align:center;font-size:24px;line-height:30px;color:#593939;}
.ca1_hot_item ul.ca1_hot_item_t3 li a{width:180px;height:40px;;float:left;font-size:12px;line-height:20px;color:#593939;border-bottom:1px dotted #CCB18E;overflow:hidden;}
.ca1_hot_item ul.ca1_hot_item_t3 li a:hover{font-weight:700;}
.ca1_hot_item ul.ca1_hot_item_t3 li a.last{border-bottom:none;}
.ca1_hot_item ul.ca1_hot_item_t3_newspaper{width:220px;height:165px;margin-top:10px;float:left;}
.ca1_hot_item ul.ca1_hot_item_t3_newspaper li{float:left;width:220px;margin-bottom:5px;}
.ca1_hot_item ul.ca1_hot_item_t3_newspaper li div.newspaper{width:80px;height:30px;float:left;margin-bottom:10px;background:url(images/newspaper-logo.png) no-repeat;}
.ca1_hot_item ul.ca1_hot_item_t3_newspaper li a{width:130px;height:50px;;float:right;font-size:12px;line-height:16px;color:#593939;border-bottom:1px dotted #CCB18E;overflow:hidden;}
.ca1_hot_item ul.ca1_hot_item_t3_newspaper li a.last{border-bottom:none;}
.ca1_hot_item ul.ca1_hot_item_s3{width:220px;float:left;}
.ca1_hot_item ul.ca1_hot_item_s3 li{width:220px;height:20px;float:left;}
.ca1_hot_item ul.ca1_hot_item_s3 li img{float:left;margin-right:5px;}
.ca1_hot_item ul.ca1_hot_item_s3 li a{font-size:12px;color:#AB8A6C;line-height:20px;float:left;width:210px;height:20px;overflow:hidden;}
.ca1_hot_item ul.ca1_hot_item_s3 li a:hover{color:#593939;}
.ca1_slide{float:left;width:700px;height:330px;}
.content_area_2{width:958px;height:230px;float:left;border-left:1px solid #CCB18E;border-right:1px solid #CCB18E;background-color:#fff;}
.ca2_hot{width:238px;height:210px;float:left;margin:10px;}
.appstore{width:238px;height:210px;float:left;}
.appstore a.appstore-logo{width:238px;height:60px;float:left;background:url(images/appstore.png) no-repeat 0 0;}
.appstore a.appstore-logo:hover{background-position:0 -60px;}
.appstore img{float:left;}
.appstore a.device{float:left;font-size:12px;line-height:20px;height:20px;margin:0 5px;color:#DBC9B0;}
.appstore a.device:hover{color:#593939;}
.ca2_impnewslist{width:600px;height:210px;margin:10px 0;float:left;}
.ca2_impnewslist_top{width:600px;float:left;padding-bottom:9px;border-bottom:1px dotted #CCB18E;margin-bottom:9px;}
.ca2_impnewslist_top_title{width:600px;float:left;margin-bottom:10px;}
.ca2_impnewslist_top_title a{font-size:14px;color:#593939;line-height:20px;float:left;font-weight:700;}
.ca2_impnewslist_top_title span.date{float:right;font-size:12px;color:#593939;line-height:20px;}
.ca2_impnewslist_top_desc a{font-size:12px;color:#AB8A6C;line-height:16px;float:left;width:600px;}
.ca2_impnewslist_ul{width:600px;float:left;}
.ca2_impnewslist_ul li{width:600px;float:right;}
.ca2_impnewslist_ul li img{float:left;margin-right:5px;}
.ca2_impnewslist_ul li a{font-size:14px;color:#AB8A6C;line-height:20px;float:left;width:500px;height:20px;overflow:hidden;}
.ca2_impnewslist_ul li a:hover{color:#593939;font-weight:700;}
.ca2_impnewslist_ul li span.date{font-size:12px;color:#AB8A6C;line-height:20px;float:right;}
.ca2_title{width:80px;height:210px;margin:10px;float:right;}
.ca2_title h2{height:24px;float:left;border-left:3px solid #593939;font-size:18px;line-height:20px;color:#593939;font-family:"Microsoft Yahei";padding-left:5px;}
.ca2_title a.more{text-align:right;color:#AB8A6C;font-size:12px;line-height:20px;width:80px;height:20px;float:left;font-weight:700;margin-top:170px;}
.ca2_title a.more:hover{color:#593939;}
.content_area_3{width:958px;height:508px;float:left;border:1px solid #CCB18E;background-color:#FFFBEE;}
.ca3_campnews{width:320px;height:505px;float:left;margin-right:20px;overflow:hidden;}
.ca3_campnews_featured{width:300px;float:left;margin:0 10px;border-bottom:1px dotted #CCB18E;padding-bottom:5px;}
.ca3_campnews_featured a{float:left;}
.ca3_campnews_featured a img{width:300px;height:150px;margin:0;padding:0;}
.ca3_campnews_featured h3{width:300px;margin:5px 0;color:#593939;font-size:14px;line-height:20px;font-weight:700;float:left;}
.ca3_campnews_featured a{font-size:12px;line-height:16px;color:#AB8A6C;}
.ca3_campnews_featured a span.more{color:#593939;margin-left:5px;}
.ca3_campnews_featured span.date{font-size:12px;line-height:20px;color:#AB8A6C;font-weight:700;margin:5px 0;float:left;}
.ca3_campnews_list{float:left;width:300px;margin:10px 10px;}
.ca3_campnews_list ul{list-style:disc;list-style-position:outside;float:left;max-height:170px;overflow:hidden;}
.ca3_campnews_list ul li{width:280px;float:right;}
.ca3_campnews_list ul li a{color:#AB8A6C;font-size:12px;line-height:16px;}
.ca3_campnews_list ul li a:hover{color:#593939;}
.ca3_campnews_list a.more{text-align:right;color:#AB8A6C;font-size:12px;line-height:20px;width:100px;height:20px;float:right;margin-right:10px;font-weight:700;}
.ca3_campnews_list a.more:hover{color:#593939;}
.ca3_specnews{width:320px;height:505px;float:left;margin-right:16px;overflow:hidden;}
.ca3_specnews_featured{width:300px;float:left;margin:0 10px;border-bottom:1px dotted #CCB18E;padding-bottom:5px;}
.ca3_specnews_featured a{float:left;}
.ca3_specnews_featured a img{width:300px;height:150px;margin:0;padding:0;}
.ca3_specnews_featured h3{width:300px;margin:5px 0;color:#593939;font-size:14px;line-height:20px;font-weight:700;float:left;}
.ca3_specnews_featured a{font-size:12px;line-height:16px;color:#AB8A6C;}
.ca3_specnews_featured a span.more{color:#593939;margin-left:5px;}
.ca3_specnews_featured span.date{font-size:12px;line-height:20px;color:#AB8A6C;font-weight:700;margin:5px 0;float:left;}
.ca3_specnews_list{float:left;width:300px;margin:10px 10px;}
.ca3_specnews_list ul{list-style:disc;list-style-position:outside;float:left;max-height:170px;overflow:hidden;}
.ca3_specnews_list ul li{width:280px;float:right;color:#AB8A6C;font-size:12px;line-height:16px;}
.ca3_specnews_list ul li a{color:#AB8A6C;font-size:12px;line-height:16px;}
.ca3_specnews_list ul li a:hover{color:#593939;}
.ca3_specnews_list a.more{text-align:right;color:#AB8A6C;font-size:12px;line-height:20px;width:100px;height:20px;float:right;margin-right:10px;font-weight:700;}
.ca3_specnews_list a.more:hover{color:#593939;}
.ca3_rucpeople{width:280px;height:500px;float:right;}
.ca3_rucpeople_list{width:280px;height:500px;float:left;overflow:hidden;}
.ca3_rucpeople_list ul{width:260px;float:left;}
.ca3_rucpeople_list ul li{width:260px;float:left;padding-bottom:9px;border-bottom:1px dotted #CCB18E;margin-bottom:10px;}
.ca3_rucpeople_list ul li img{width:58px;height:58px;border:1px solid #333;float:left;}
.ca3_rucpeople_list ul li a{width:190px;height:60px;float:right;font-size:12px;line-height:20px;color:#AB8A6C;}
.ca3_rucpeople_list ul li a:hover{color:#593939;}
.ca3_rucpeople_list ul li a span{font-weight:700;margin-left:8px;color:#593939;}
.ca2_title a.more:hover{color:#593939;}
.ca3_rucpeople_list a.more{text-align:right;color:#AB8A6C;font-size:12px;line-height:20px;width:100px;height:20px;float:right;margin-right:10px;font-weight:700;}
.ca3_rucpeople_list a.more:hover{color:#593939;}
.content_area_4{width:958px;height:190px;float:left;border:1px solid #CCB18E;border-top:none;}
.ca4_pix{width:258px;height:190px;float:left;margin-right:20px;}
.ca4_pix_title{width:245px;}
.ca4_pix ul{width:100%;height:130px;float:left;}
.ca4_pix ul li{width:56px;height:56px;margin:0px 0px 7px 7px;float:left;}
.ca4_pix ul li img{width:56px;height:56px;}
.ca4_pix ul li a.ca4_pix_more{width:56px;height:20px;float:left;margin-top:36px;color:#AB8A6C;font-size:12px;line-height:20px;text-align:right;font-weight:700;}
.ca4_pix ul li a.ca4_pix_more:hover{color:#593939;}
.ca4_vedios{width:380px;height:190px;float:left;margin-right:20px;}
.ca4_vedios_title{width:367px;}
.ca4_vedios_item{width:380px;height:130px;float:left;}
.ca4_vedios_item_pix{width:180px;height:100px;margin-right:10px;float:left;}
.ca4_vedios_item_pix a img{width:180px;height:100px;}
.ca4_vedios_item_desc{width:190px;height:100px;float:right;}
.ca4_vedios_item_desc h3{font-size:14px;color:#593939;font-weight:700;margin-bottom:10px;float:left;}
.ca4_vedios_item_desc span{float:left;font-size:12px;color:#CCB18E;margin-bottom:5px;width:190px;}
.ca4_vedios_item_more{width:380px;height:20px;float:left;margin-top:10px;}
.ca4_vedios_item_more a{float:right;color:#AB8A6C;font-size:12px;}
.ca4_vedios_item_more a:hover{color:#593939;}
.ca4_links{width:280px;height:190px;float:left;}
.ca4_links_title{width:267px;}
.ca4_links ul{width:260px;height:130px;float:left;margin-left:13px;}
.ca4_links ul li{width:130px;height:20px;float:left;}
.ca4_links ul li a{font-size:12px;line-height:20px;color:#AB8A6C;}
.ca4_links ul li a:hover{color:#593939;}
.content_cat{width:958px;float:left;border:1px solid #CCB18E;padding:10px 0;}
.content_col_1{width:180px;float:left;margin-right:20px;min-height:500px;}
.content_col_2{width:500px;float:left;min-height:500px;overflow:hidden;}
.content_col_2_nav{width:500px;height:20px;float:left;margin-bottom:20px;}
.content_col_2_nav_alignright{float:right;}
.content_col_2_nav_alignleft{float:left;}
.content_col_2_nav_alignleft a,.content_col_2_nav_alignright a{color:#CCB18D;font-size:12px;}
.content_col_2_nav_alignleft a:hover,.content_col_2_nav_alignright a:hover{color:#593939;}
.content_col_2_cats{width:500px;float:left;margin:10px 0;height:20px;}
.content_col_2_cats a,.content_col_2_cats span{font-size:14px;line-height:20px;float:left;margin-right:10px;color:#593939;}
.content_col_2_cats a:hover{text-decoration:none;}
.content_col_2_cats a.currect{font-weight:700;text-decoration:none;}
.content_col_2_list{width:500px;float:left;margin:10px 0;border-bottom:1px dotted #CCB18E;padding-bottom:15px;}
.content_col_2_list ul{width:500px;float:left;}
.content_col_2_list ul li{width:500px;float:left;margin-bottom:8px;text-align:right;font-size:14px;}
.content_col_2_list ul li img{float:left;width:5px;height:20px;margin-right:5px;}
.content_col_2_list ul li a{float:left;width:410px;color:#593939;font-size:14px;line-height:20px;text-align:left;}
.content_col_2_list ul li a:hover{color:#AB8A6C;}
.content_col_2_list ul li span{float:right;width:70px;height:20px;text-align:right;color:#CCB18D;font-size:12px;line-height:20px;}
.content_col_2_copyright{width:500px;float:left;border-bottom:1px dotted #CCB18E;padding-bottom:15px;}
.content_col_2_copyright h3{width:500px;color:#AB8A6C;font-size:12px;font-weight:700;height:30px;line-height:30px;}
.content_col_2_copyright p{width:500px;font-size:12px;color:#AB8A6C;line-height:20px;}
.content_col_2_pagenav{widows:500px;height:20px;float:left;}
.content_col_2_pagenav span{float:left;color:#593939;font-size:12px;line-height:20px;margin-right:5px;}
.content_col_2_pagenav span.keyword{float:left;color:#593939;font-size:14px;line-height:20px;margin-right:5px;}
.content_col_2_pagenav a{float:left;color:#593939;font-size:12px;line-height:20px;margin-right:5px;}
.news_content{width:500px;float:left;margin-bottom:10px;border-bottom:1px dotted #CCB18E;padding-bottom:5px;}
.nc_title{width:500px;float:left;margin:10px 0;font-size:16px;line-height:24px;color:#383E33;font-weight:700;}
.nc_meta{float:left;width:500px;height:20px;font-size:12px;line-height:20px;color:#AB8A6C;}
.views{float:right;margin-right:10px;}
.nc_meta span.date{color:#CCB18D;margin-right:10px;}
.nc_author{float:left;width:500px;height:20px;font-size:12px;line-height:20px;color:#AB8A6C;}
.nc_body{width:500px;float:left;margin-top:30px;}
.nc_body p{width:500px;font-size:14px;line-height:20px;margin-bottom:20px;color:#593939;float:left;}
.nc_body img{box-shadow:0 1px 3px rgba(0,0,0,0.3);max-width:490px;height:auto;margin-left:0;border-radius:4px;}
.nc_body a{color:#593939;}
.nc_body a:hover{text-decoration:none;}
.nc_body table{max-width:500px;margin-bottom:20px;}
.nc_body table p{width:auto !important;margin-bottom:5px !important;}
.nc_body strong,.nc_body p strong{font-weight:700;}
.nc_body img.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.content_col_3{width:220px;float:left;min-height:500px;margin-left:20px;}
.content_col_3_item{width:220px;float:left;margin-bottom:20px;border-bottom:1px dotted #CCB18E;padding-bottom:10px;}
.toolbox{width:220px;height:40px;float:left;margin-bottom:30px;}
.toolbox_home{width:220px;height:20px;float:left;}
.toolbox_home a{font-size:12px;line-height:20px;width:220px;text-align:right;height:20px;float:left;color:#AB8A6C;}
.toolbox_home a:hover{color:#593939;}
.toolbox_fontsize{width:220px;height:20px;float:left;}
.toolbox_fontsize span{color:#CCB18C;float:right;margin:0 5px;height:20px;line-height:20px;cursor:pointer;font-family:"Times New Roman";font-size:14px;}
.toolbox_fontsize span.f1{font-size:12px;}
.toolbox_fontsize span.f2{font-size:14px;}
.toolbox_fontsize span.f3{font-size:16px;}
.toolbox_fontsize span.cur{color:#593939;}
.toolbox_fontsize span.f1:hover,.toolbox_fontsize span.f2:hover,.toolbox_fontsize span.f3:hover{text-decoration:none;color:#593939;}
.archievelist{width:220px;float:left;}
.archievelist span.title{border-left:3px solid #593939;color:#593939;cursor:pointer;float:left;font-family:"Microsoft Yahei";font-size:14px;height:20px;line-height:20px;padding-left:5px;text-align:left;width:210px;}
.archievelist ul{width:220px;float:left;margin-top:20px;}
.archievelist ul li{width:110px;float:left;height:20px;}
.archievelist ul li a{color:#AB8A6C;float:right;font-size:12px;height:20px;line-height:20px;width:100px;}
.archievelist ul li a:hover{color:#593939;}
.relatednews{width:220px;float:left;}
.relatednews span.title{border-left:3px solid #593939;color:#593939;cursor:pointer;float:left;font-family:"Microsoft Yahei";font-size:14px;height:20px;line-height:20px;padding-left:5px;text-align:left;width:210px;}
.relatednews ul{width:220px;float:left;margin-top:10px;}
.relatednews ul li{width:220px;float:left;}
.relatednews ul li img{float:left;width:5px;height:20px;margin-right:5px;}
.relatednews ul li a{color:#AB8A6C;float:left;font-size:12px;line-height:20px;width:200px;}
.taglist{width:220px;float:left;}
.taglist span.title{border-left:3px solid #593939;color:#593939;cursor:pointer;float:left;font-family:"Microsoft Yahei";font-size:14px;height:20px;line-height:20px;padding-left:5px;text-align:left;width:210px;}
.taglist ul{width:220px;float:left;margin-top:10px;}
.taglist ul li{float:left;margin-right:5px;}
.taglist ul li a{color:#AB8A6C;float:left;font-size:12px;line-height:20px;min-width:30px;text-align:center;}
.taglist ul li a:hover{color:#593939;}
.content_col_4{width:680px;float:left;min-height:500px;margin-left:20px;}
.content_col_4_title{width:680px;height:50px;float:left;margin:10px 0;}
.content_col_4_title_logo{width:120px;height:50px;float:left;}
.content_col_4_title_links{width:550px;height:50px;float:right;}
.cc4_title_links_top{width:550px;height:30px;float:left;font-size:16px;line-height:30px;color:#593939;font-weight:700;}
.cc4_title_links_bottom{width:550px;height:20px;float:left;}
.cc4_title_links_bottom a{float:left;height:25px;line-height:25px;font-size:12px;color:#AB8A6C;}
.cc4_title_links_bottom a.currect{color:#593939;font-weight:700;}
.cc4_title_links_bottom span.sprit{float:left;height:25px;line-height:25px;font-size:12px;color:#AB8A6C;margin:0 10px;}
.content_col_4_body{width:680px;float:left;}
.content_col_4_body ul.albumlist{width:680px;float:left;}
.content_col_4_body ul.albumlist li{width:220px;height:220px;float:left;}
.videobox{width:640px;height:360px;float:left;margin:0 30px;}
.video_content{width:640px;float:left;padding:10px 0;border-bottom:1px dotted #593939;margin-bottom:10px;padding:20px 30px;}
.video_content p{color:#593939;float:left;font-size:12px;line-height:20px;width:680px;}
.gallerybox{width:680px;float:left;margin:10px 0;padding-bottom:10px;border-bottom:1px dotted #AB8A6C;}
.gallerybox p{color:#593939;float:left;font-size:12px;line-height:20px;width:680px;}
.gallery{width:680px;float:left;margin-bottom:20px;}
.albumlist-pix-bg{width:204px;height:152px;margin:0 8px 8px 8px;background:url(images/album-pix-bg.png) no-repeat 0 0;}
.albumlist-pix-bg img{width:190px;max-height:142px;margin:5px;float:left;}
.albumlist-meta{width:204px;height:60px;margin:0 8px;}
.albumlist-meta a{width:195px;float:left;border-left:3px solid #CCB18E;padding-left:6px;font-size:12px;color:#593939;line-height:16px;}
.albumlist-meta span{color:#AB8A6C;float:left;width:195px;padding-left:9px;font-size:12px;margin:5px 0;}
.content_col_4_nav{width:680px;height:20px;border-top:1px dotted #CCB18E;float:left;padding-top:10px;margin-top:10px;}
.content_col_4_nav_alignright{float:right;}
.content_col_4_nav_alignleft{float:left;}
.content_col_4_nav_alignleft a,.content_col_4_nav_alignright a{color:#CCB18D;font-size:12px;}
.content_col_4_nav_alignleft a:hover,.content_col_4_nav_alignright a:hover{color:#593939;}
.content_col_4_copyright{width:660px;float:left;margin:10px;}
.content_col_4_copyright h3{width:500px;color:#AB8A6C;font-size:12px;font-weight:700;height:30px;line-height:30px;}
.content_col_4_copyright p{width:500px;font-size:12px;color:#AB8A6C;line-height:20px;}
#footer{width:960px;height:40px;margin:10px 0 50px 0px;float:left;}
.footer_left{width:600px;height:40px;float:left;}
.ruc_logo{width:160px;height:40px;padding:0 10px;border-right:1px solid #CCB18E;float:left;margin-right:10px;}
.auth_links{width:400px;height:40px;float:left;}
.auth_links span{width:400px;height:20px;float:left;}
.auth_links span a{float:left;font-size:12px;line-height:20px;margin-right:15px;color:#CCB18E;}
.auth_links span a:hover{color:#593939;}
.footer_right{width:350px;height:40px;float:right;}
.footer_right ul{width:100%;height:20px;float:left;}
.footer_right ul li{float:right;height:20px;color:#CCB18E;font-size:12px;line-height:20px;}
.footer_right ul li.sprite{margin:0 4px;}
.footer_right ul li.copyright{margin-left:20px;}
.footer_right ul li a{float:left;height:20px;font-size:12px;line-height:20px;color:#CCB18E;}
.footer_right ul li a:hover{color:#593939;}
分享到QQ
分享到微博
微信扫一扫
