利用jQuery实现时间轴插件代码



36 141 48



特效描述:利用jQuery实现 时间轴,利用jQuery实现时间轴插件代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/main.css" />

2. 引入JS

<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>

3. HTML代码

<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 日期时间 时钟 日历 时间 日历插件 时间日期插件 时间轴 竖直时间轴 横向时间轴 文字切换 文字选项卡 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到