以下是 jQuery时间轴插件Timelinr js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery时间轴插件Timelinr</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
#timeline {width: 760px;height: 300px;overflow: hidden;margin: 100px auto;position: relative;background: url('img/dot.gif') left 45px repeat-x;}
#dates {width: 760px;height: 60px;overflow: hidden;}
#dates li {list-style: none;float: left;width: 100px;height: 50px;font-size: 24px;text-align: center;background: url('img/biggerdot.png') center bottom no-repeat;}
#dates a {line-height: 38px;padding-bottom: 10px;}
#dates .selected {font-size: 38px;}
#issues {width: 760px;height: 300px;overflow: hidden;}
#issues li {width: 760px;height: 300px;list-style: none;float: left;}
#issues li h1 {color: #ffcc00;font-size: 42px;margin: 20px 0;text-shadow: #000 1px 1px 2px;}
#issues li p {font-size: 14px;margin-right: 70px; margin:10px; font-weight: normal;line-height: 22px;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.timelinr-0.9.53.js"></script>
<script type="text/javascript">
$(function(){
$().timelinr({
autoPlay: 'true',
autoPlayDirection: 'forward',
startAt: 4
})
});
</script>
</head>
<body>
<div id="main">
<h2 class="top_title">jQuery时间轴插件：jQuery Timelinr</h2>
<div id="timeline">
<ul id="dates">
<li><a href="#2005">2005</a></li>
<li><a href="#2006">2006</a></li>
<li><a href="#2007">2007</a></li>
<li><a href="#2008">2008</a></li>
<li><a href="#2009">2009</a></li>
<li><a href="#2010">2010</a></li>
<li><a href="#2012">2012</a></li>
<li><a href="#2014">2014</a></li>
</ul>
<ul id="issues">
<li id="2005">
<h1>2005 闪亮登场</h1>
<p>2005年，呱呱坠地。界面清爽、功能俱全、操作简单易上手，是大家都喜爱的网络家园。出生不久，就有越来越多的朋友到我这里分享自己的生活。</p>
</li>
<li id="2006">
<h1>2006 扬帆起航</h1>
<p>2006年，咿呀学语。面对每天千万级的用户访问，技术GG帮我优化了架构，设计师MM帮我设计了欢迎动画等个性化装扮，“妈妈再也不担心我404了”！</p>
</li>
<li id="2007">
<h1>2007 内外兼修</h1>
<p>2007年，初长成。咱推出了信息中心和好友圈，开始向SNS社区转型；首创4.0全屏模式，更加美观大方。</p>
</li>
<li id="2008">
<h1>2008 厚积薄发</h1>
<p>2008年，十八变。当年推出的个人中心，正式标志着我从传统博客向SNS社区的转变，注册用户和分享量稳居国内第一；每天都有超多用户在我这里分享生活中的新鲜事。</p>
</li>
<li id="2009">
<h1>2009 百花齐放</h1>
<p>2009年，百花齐放。引入众多国民级应用，其中最出名的QQ农场，给了好多人一个深夜上网的理由，也为拉近老爸老妈老婆老公的关系做出了卓越的贡献。</p>
</li>
<li id="2010">
<h1>2010 新体验、新起点</h1>
<p>2010年，强化内功。致力于在产品体验不断的精雕细琢。因为经历了飞速发展的5年，我明白只有不断的自我修炼，才能让大家真正把咱当成网络的家。</p>
</li>
<li id="2012">
<h1>2012 我的空间 我的家</h1>
<p>2012年，培养内涵。更优质的宽屏体验、更丰富的应用、更热闹的个人中心，都是我不断培养内涵的结果。让网络上的家越来越上流，是我追求的目标。</p>
</li>
<li id="2012">
<h1>2014 分享生活 留住感动</h1>
<p>2014年，蜕变，不变。和大家一起经历的7年，是我生命中最美好的7年。你们在这7年里，有的从学生步入社会，有的成立家庭，有的有了孩子。时光流转，我们都在成长，但唯一不变的，就是QQ空间——你永远的家！</p>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS代码(main.css):
@charset "utf-8";/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/
;text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
body{height:100%;font:12px/18px Tahoma,Helvetica,Arial,Verdana,"\5b8b\4f53",sans-serif;color:#51555C;background:#162934}
img{border:none}
#main{width:910px;min-height:600px;margin:30px auto 0 auto;background:#fff;-moz-border-radius:12px;-khtml-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
h2.top_title{margin:4px 20px;padding-top:15px;padding-left:20px;padding-bottom:10px;border-bottom:1px solid #d3d3d3;font-size:18px;color:#a84c10;background:url(../images/arrL.gif) no-repeat 2px 14px}
分享到QQ
分享到微博
微信扫一扫
