利用jQuery實現時間軸插件代碼



41 163 55



特效描述:利用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

加群請備注:從官網了解到

老夫子电子