jQuery左右滑动切换时间轴滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery左右滑动切换时间轴滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右滑动切换时间轴代码</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.timelinr-0.9.4.js" type="text/javascript"></script>
<script type="text/javascript"> 
	$(function(){
		$().timelinr({
			autoPlay: 'true',
			autoPlayDirection: 'forward',
			startAt: 3
		})
	});
</script>
</head>
<body id="introduction">
<br><br>
<div id="page">
	<div id="container" class="content clearfix">
	<div id="timeline">
		<ul id="dates">
			<li><a href="#1月13日">1月13日</a></li>
			<li><a href="#1月15日">1月15日</a></li>
			<li><a href="#1月20日">1月20日</a></li>
			<li><a href="#1月27日">1月27日</a></li>
			<li><a href="#1月29日">1月29日</a></li>
			<li><a href="#2月2日">2月2日</a></li>
			<li><a href="#2月4日">2月4日</a></li>
			<li><a href="#2月5日">2月5日</a></li>
			<li><a href="#3月13日">3月13日</a></li>
			<li><a href="#3月17日">3月17日</a></li>
			<li><a href="#3月18日">3月18日</a></li>
			<li><a href="#3月19日">3月19日</a></li>
			<li><a href="#3月26日">3月26日</a></li>
			<li><a href="#4月1日">4月1日</a></li>
		</ul>
		<ul id="issues">
			<li id="1月13日">
				<a href="#" target="_blank"><img src="images/1.jpg" width="256" height="220" /></a>
				<h1><a href="#" target="_blank">贺静：建谈——绿色建筑是什么</a></h1>
				<p>本期【绿建大讲堂】由中国建筑设计标准研究院的贺静博士后担任主讲人，从更加广义的角度解析绿色建筑的真正内涵。<span style="text-indent:upline;"><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月15日">
				<a href="#" target="_blank"><img src="images/2.jpg" width="256" height="220" /></a>
				<h1><a href="#" target="_blank">曹春莉：BREEAM in China</a></h1>
				<p>本期【绿建大讲堂】由曹春莉博士与大家分享英国绿色建筑评价标准BREEAM，以及BREEAM在中国的发展情况。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月20日">
				<a href="#" target="_blank"><img src="images/3.jpg" width="256" height="220" /></a>
				<h1><a href="#" target="_blank">郭佳鑫：绿色建筑 点睛之材——真空玻璃</a></h1>
				<p>本期【绿建大讲堂】由郭佳鑫女士与大家分享绿色建筑点睛之材——真空玻璃。内容从真空玻璃的发展历史、优势分析、应用等方面，深入分析和阐述了真空玻璃作为新型的绿色建材的广阔应用前景。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月27日">
				<a href="#" target="_blank"><img src="images/4.jpg" width="256" height="220" /></a>
				<h1><a href="#" target="_blank">武洪玲：阳光空气水——3M阳光</a></h1>
				<p>本期【绿建大讲堂】由北京英飞鸿科技有限公司节能产品事业部产品经理
武洪玲与大家分享美国3M公司的管道式日光照明系统，光导纤维照明和建筑窗贴膜产品。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月29日">
				<img src="images/5.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">郭振兴：绿色建筑标识评价变化与发展</a></h1>
				<p>本期【绿建大讲堂】由绿建专家郭振兴担任主讲人，围绕新版《绿色建筑评价标准》gb50378-2014从以下四个方面：业务模式的变化、不断成长的标准体系、国标2014版评价内容的变化、趋势分析，开展《绿色建筑标识评价变化与发展》主题讲座。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月2日">
				<img src="images/6.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">马庄：浅谈中国木结构建筑的发展</a></h1>
				<p>本期【绿建大讲堂】由多年从事木结构建筑工作的马庄为大家介绍中国木结构建筑的历史发展以及木结构建筑的主要结构和发展前景。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月4日">
				<img src="images/7.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">李林蔓：绿色照明——LED的应用</a></h1>
				<p>本期【绿建大讲堂】由李林蔓总经理担任主讲人，主要就LED 的产业现状以及LED未来发展的优势展开以“绿色照明—LED的应用”为主题的专题讲座。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月5日">
				<img src="images/8.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">殷明刚：CFD在建筑环境领域的实践与研究</a></h1>
				<p>本期【绿建大讲堂】由经验丰富的绿色建筑模拟专家殷明刚结合实际工程案例介绍CFD在建筑环境领域的应用。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月13日">
				<img src="images/9.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">隗艳：污水处理技术</a></h1>
				<p>本期讲座由拥有多项污水处理技术专利的北京依维优环境设备制造有限公司的技术总监隗艳为大家介绍先进的污水处理技术及案例分享。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月17日">
				<img src="images/10.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">钱纪程：物业管理和节能减排</a></h1>
				<p>本期讲座由具有多年物业管理工作经验的北京华清物业管理有限责任公司总工程师钱纪程带来“物业管理和节能减排”主题讲座，钱总工结合实际案例介绍了建筑全生命周期中物业管理的重要性以及物业管理对节能减排的影响。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月18日">
				<img src="images/11.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">赵永青：建筑能耗模拟及应用</a></h1>
				<p>本次（建筑物理模拟讲座）由经验丰富的建筑能耗模拟专家赵永青结合实际工程案例介绍建筑能耗模拟在建筑坏境领域的应用。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月19日">
				<img src="images/12.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">何森：室内环境质量与物联网</a></h1>
				<p>本期【绿建大讲堂】是由瑞芬德（北京）环境科技有限公司总经理何森教授担任主讲人，为大家介绍互联网时代下的室内空气质量管理——室内空气质量与物联网。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月26日">
				<img src="images/13.png" width="256" height="220" />
				<h1><a href="#" target="_blank">于传江：汉能薄膜太阳能组件产品介绍</a></h1>
				<p>汉能是生产太阳能薄膜电池的，不同于其他厂家生产的单晶硅和多晶硅电池。
太阳能发电分为两种，第一种是光吸收热量再转化为电能，第二种是光生电即光伏效应，即利用薄膜电池和太阳能电池。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
			<li id="4月1日">
				<img src="images/14.jpg" width="256" height="220" />
				<h1><a href="#" target="_blank">郑立红：天津生态城在能耗模拟方面的研究和探索</a></h1>
				<p>本次【建筑物理模拟讲座】由经验丰富的建筑能耗模拟专家郑立红，介绍天津生态城在能耗标准研究、探索及取得的成绩，最后是e QUESTS本地化的一些构想。<span><a href="#" target="_blank">更多>></a></span></p>
			</li>
		</ul>
		<div id="grad_left"></div>
		<div id="grad_right"></div>
	</div>
  </div> 
</body>
</html>

JS代码(jquery.timelinr-0.9.4.js):

/* ----------------------------------jQuery Timelinr 0.9.4tested with jQuery v1.6+©2011 CSSLab.clfree for any use,of course...:Dinstructions:http://www.csslab.cl/2011/08/18/jquery-timelinr/---------------------------------- */
jQuery.fn.timelinr = function(options){
	// default plugin settingssettings = jQuery.extend({
	orientation:'horizontal',// value:horizontal | vertical,default to horizontalcontainerDiv:'#timeline',// value:any HTML tag or #id,default to #timelinedatesDiv:'#dates',// value:any HTML tag or #id,default to #datesdatesSelectedClass:'selected',// value:any class,default to selecteddatesSpeed:800,// value:integer between 100 and 1000 (recommended),default to 500 (normal)issuesDiv:'#issues',// value:any HTML tag or #id,default to #issuesissuesSelectedClass:'selected',// value:any class,default to selectedissuesSpeed:400,// value:integer between 100 and 1000 (recommended),default to 200 (fast)issuesTransparency:0.2,// value:integer between 0 and 1 (recommended),default to 0.2issuesTransparencySpeed:800,// value:integer between 100 and 1000 (recommended),default to 500 (normal)prevButton:'#prev',// value:any HTML tag or #id,default to #prevnextButton:'#next',// value:any HTML tag or #id,default to #nextarrowKeys:'false',// value:true | false,default to falsestartAt:1,// value:integer,default to 1 (first)autoPlay:'false',// value:true | false,default to falseautoPlayDirection:'forward',// value:forward | backward,default to forwardautoPlayPause:6000// value:integer (1000 = 1 seg),default to 2000 (2segs)}
,options);
	$(function(){
	// setting variables... many of themvar howManyDates = $(settings.datesDiv+' li').length;
	var howManyIssues = $(settings.issuesDiv+' li').length;
	var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
	var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
	var widthContainer = $(settings.containerDiv).width();
	var heightContainer = $(settings.containerDiv).height();
	var widthIssues = $(settings.issuesDiv).width();
	var heightIssues = $(settings.issuesDiv).height();
	var widthIssue = $(settings.issuesDiv+' li').width();
	var heightIssue = $(settings.issuesDiv+' li').height();
	var widthDates = $(settings.datesDiv).width();
	var heightDates = $(settings.datesDiv).height();
	var widthDate = $(settings.datesDiv+' li').width();
	var heightDate = $(settings.datesDiv+' li').height();
	// set positions!if(settings.orientation == 'horizontal'){
	$(settings.issuesDiv).width(widthIssue*howManyIssues);
	$(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
	var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
}
else if(settings.orientation == 'vertical'){
	$(settings.issuesDiv).height(heightIssue*howManyIssues);
	$(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
	var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
}
$(settings.datesDiv+' a').click(function(event){
	event.preventDefault();
	// first varsvar whichIssue = $(this).text();
	var currentIndex = $(this).parent().prevAll().length;
	// moving the elementsif(settings.orientation == 'horizontal'){
	$(settings.issuesDiv).animate({
	'marginLeft':-widthIssue*currentIndex}
,{
	queue:false,duration:settings.issuesSpeed}
);
}
else if(settings.orientation == 'vertical'){
	$(settings.issuesDiv).animate({
	'marginTop':-heightIssue*currentIndex}
,{
	queue:false,duration:settings.issuesSpeed}
);
}
$(settings.issuesDiv+' li').animate({
	'opacity':settings.issuesTransparency}
,{
	queue:false,duration:settings.issuesSpeed}
).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
	// now moving the dates$(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
	$(this).addClass(settings.datesSelectedClass);
	if(settings.orientation == 'horizontal'){
	$(settings.datesDiv).animate({
	'marginLeft':defaultPositionDates-(widthDate*currentIndex)}
,{
	queue:false,duration:settings.datesSpeed}
);
}
else if(settings.orientation == 'vertical'){
	$(settings.datesDiv).animate({
	'marginTop':defaultPositionDates-(heightDate*currentIndex)}
,{
	queue:false,duration:settings.datesSpeed}
);
}
}
);
	$(settings.nextButton).bind('click',function(event){
	event.preventDefault();
	if(settings.orientation == 'horizontal'){
	var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
	var currentIssueIndex = currentPositionIssues/widthIssue;
	var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
	var currentIssueDate = currentPositionDates-widthDate;
	if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))){
	$(settings.issuesDiv).stop();
	$(settings.datesDiv+' li:last-child a').click();
}
else{
	if (!$(settings.issuesDiv).is(':animated')){
	$(settings.issuesDiv).animate({
	'marginLeft':currentPositionIssues-widthIssue}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li').animate({
	'opacity':settings.issuesTransparency}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed,1).addClass(settings.issuesSelectedClass);
	$(settings.datesDiv).animate({
	'marginLeft':currentIssueDate}
,{
	queue:false,duration:settings.datesSpeed}
);
	$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
}
}
}
else if(settings.orientation == 'vertical'){
	var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
	var currentIssueIndex = currentPositionIssues/heightIssue;
	var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
	var currentIssueDate = currentPositionDates-heightDate;
	if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))){
	$(settings.issuesDiv).stop();
	$(settings.datesDiv+' li:last-child a').click();
}
else{
	if (!$(settings.issuesDiv).is(':animated')){
	$(settings.issuesDiv).animate({
	'marginTop':currentPositionIssues-heightIssue}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li').animate({
	'opacity':settings.issuesTransparency}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed,1).addClass(settings.issuesSelectedClass);
	$(settings.datesDiv).animate({
	'marginTop':currentIssueDate}
,{
	queue:false,duration:settings.datesSpeed}
);
	$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
}
}
}
}
);
	$(settings.prevButton).click(function(event){
	event.preventDefault();
	if(settings.orientation == 'horizontal'){
	var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
	var currentIssueIndex = currentPositionIssues/widthIssue;
	var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
	var currentIssueDate = currentPositionDates+widthDate;
	if(currentPositionIssues >= 0){
	$(settings.issuesDiv).stop();
	$(settings.datesDiv+' li:first-child a').click();
}
else{
	if (!$(settings.issuesDiv).is(':animated')){
	$(settings.issuesDiv).animate({
	'marginLeft':currentPositionIssues+widthIssue}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li').animate({
	'opacity':settings.issuesTransparency}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed,1).addClass(settings.issuesSelectedClass);
	$(settings.datesDiv).animate({
	'marginLeft':currentIssueDate}
,{
	queue:false,duration:settings.datesSpeed}
);
	$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
}
}
}
else if(settings.orientation == 'vertical'){
	var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
	var currentIssueIndex = currentPositionIssues/heightIssue;
	var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
	var currentIssueDate = currentPositionDates+heightDate;
	if(currentPositionIssues >= 0){
	$(settings.issuesDiv).stop();
	$(settings.datesDiv+' li:first-child a').click();
}
else{
	if (!$(settings.issuesDiv).is(':animated')){
	$(settings.issuesDiv).animate({
	'marginTop':currentPositionIssues+heightIssue}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li').animate({
	'opacity':settings.issuesTransparency}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed,1).addClass(settings.issuesSelectedClass);
	$(settings.datesDiv).animate({
	'marginTop':currentIssueDate}
,{
	queue:false,duration:settings.datesSpeed}
,{
	queue:false,duration:settings.issuesSpeed}
);
	$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
}
}
}
}
);
	// keyboard navigation,added since 0.9.1if(settings.arrowKeys=='true'){
	if(settings.orientation=='horizontal'){
	$(document).keydown(function(event){
	if (event.keyCode == 39){
	$(settings.nextButton).click();
}
if (event.keyCode == 37){
	$(settings.prevButton).click();
}
}
);
}
else if(settings.orientation=='vertical'){
	$(document).keydown(function(event){
	if (event.keyCode == 40){
	$(settings.nextButton).click();
}
if (event.keyCode == 38){
	$(settings.prevButton).click();
}
}
);
}
}
// default position startAt,added since 0.9.3$(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
	// autoPlay,added since 0.9.4if(settings.autoPlay == 'true'){
	setInterval("autoPlay()",settings.autoPlayPause);
}
}
);
}
;
	// autoPlay,added since 0.9.4function autoPlay(){
	var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
	if(settings.autoPlayDirection == 'forward'){
	if(currentDate.parent().is('li:last-child')){
	$(settings.datesDiv+' li:first-child').find('a').trigger('click');
}
else{
	currentDate.parent().next().find('a').trigger('click');
}
}
else if(settings.autoPlayDirection == 'backward'){
	if(currentDate.parent().is('li:first-child')){
	$(settings.datesDiv+' li:last-child').find('a').trigger('click');
}
else{
	currentDate.parent().prev().find('a').trigger('click');
}
}
}

CSS代码(styles.css):

*{margin:0;padding:0;}
ul,li{list-style:none;}
body > #page{height:auto;min-height:100%;}
#footer{position:relative;margin-top:-70px;height:70px;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
body{background:#62c062;font:13px/1.3 'Microsoft Yahei','宋体';color:#fff;}
#page,#footer_inner{margin:0 auto;width:960px;}
h1#logo{background:url('../img/logo.jpg') no-repeat 50% 25px;overflow:hidden;height:93px;padding:25px 0;}
h1#logo a{display:block;text-indent:-9999px;height:93px;}
#container{margin:0 auto;}
#container h2{font-weight:normal;line-height:28px;}
#container p{padding:5px 0;}
.credit{text-align:center;padding:20px 0 100px;font-size:10px;}
a,a:visited{text-decoration:none;outline:none;color:#fff;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;width:100%;}
#footer h2{font-size:18px;font-weight:normal;height:70px;line-height:70px;font-family:"Microsoft Yahei";color:#eee;}
#footer_inner{position:relative;}
#footer a.tzine,a.tzine:visited{color:#FCFCFC;font-size:12px;line-height:70px;position:absolute;top:0;right:0;width:90px;}
.demotips{margin:0 auto;text-align:center;font-size:25px;}
.demotips a{margin:0 10px;}
/*-核心代码-*/
/* Menu style */
#timeline{border:1px solid #66cc66;width:840px;height:350px;overflow:hidden;margin:0 auto 10px;position:relative;border-radius:5px;background:url('../images/dot.gif') left 55px repeat-x;}
#dates{width:840px;height:60px;overflow:hidden;padding-top:10px;}
#dates li{list-style:none;float:left;width:140px;height:50px;font-size:24px;text-align:center;background:url('../images/biggerdot.png') center bottom no-repeat;}
#dates a{line-height:38px;padding-bottom:10px;}
#dates .selected{font-size:32px;color:#f40;}
#issues{width:800px;height:350px;overflow:hidden;}
#issues li{width:800px;height:350px;list-style:none;float:left;}
#issues li img{float:left;margin:10px 30px 10px 50px;border-radius:4px;}
#issues li h1{width:740px;color:#ffcc00;font-size:24px;margin:5px 0;text-shadow:#0c4c0c 1px 1px 2px;}
#issues li p{font-size:17.6px;margin-right:60px;font-weight:normal;line-height:30px;text-shadow:#339933 1px 1px 2px;text-indent:2em;}
#grad_left,#grad_right{width:100px;height:350px;position:absolute;top:0;}
#grad_left{left:0;border-radius:5px;background:url('../images/grad_left.png') repeat-y;}
#grad_right{right:0;background:url('../images/grad_right.png') repeat-y;}
#next,#prev{position:absolute;top:0;font-size:70px;top:170px;width:22px;height:38px;background-position:0 0;background-repeat:no-repeat;text-indent:-9999px;overflow:hidden;}
#next:hover,#prev:hover{background-position:0 -76px;}
#next{right:0;background-image:url('../images/next.png');}
#prev{left:0;background-image:url('../images/prev.png');}
#next.disabled,#prev.disabled{opacity:0.2;}
#zhuanti_top{width:100%;height:65px;position:fixed;top:0px;left:0px;z-index:999;text-align:center;background:url(../images/top_bg1.png) #fff repeat-x;margin:0 auto;}
#zhuanti_center{width:1000px;margin:5px auto 0px;font-size:16px;color:#000;height:55px;line-height:12px;clear:both;}
#zhuanti_center a.mLink{color:#828282;text-decoration:none;}
#zhuanti_center a.mLink:hover{color:red;}
#zhuanti_center #miniLogo{float:left;}
#zhuanti_center #miniLogo img{border:0;height:55px;}
#zhuanti_center #miniLink{float:right;padding:23px 8px 0 0;}
.footer span{font-size:18px;color:#fff;}
#jump{position:fixed;top:50%;right:5px;width:40px;z-index:400;_position:absolute;_top:expression(documentElement.scrollTop + "px");}
#weixin{display:block;width:40px;height:40px;cursor:pointer;}
#weixin{background:url(../images/st-weixin.png) repeat scroll 0% 0% transparent;}
#EWM{position:absolute;right:45px;top:-135px;display:none;}
#EWM img{width:150px;height:150px;}
#issues li span a{color:#f40;}
#issues li h1 a{color:#ffcc00;}

附件:下载该文件资源,减少时间成本(增值服务)