搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 網頁設計仿FB時光軸JS網站效果 (支援響應式) ...
byadmin 發表於 2015-4-22 22:01:33 , 6209人已閱讀 , 0人回應
早期FB時光軸介面,算是近幾年來網站UI設計中成功普及應用於網站服務的一項成功設計,雖然這兩年FB已改為雙欄式瀑布流UI,但不可否認之前FB的時光軸設計的確是一項優秀的文章展示模式 ! 今天分享一款CSS3+JS設計的仿時光軸UI效果給大家,本款套件也有採用響應式設計,可完整支援於手機平版界面中,非常適合拿來開發WebView APP,只要你對AJax 以及 PHP 有一定的了解,即可應用於各大CMS系統中,最近Shawn可能也考慮採用本套件來製作SR數位設計的手機版UI界面,如果你對時光軸UI也有興趣,相信本套件一定可以滿足你 !

vertical-timeline-featured.png


JS套件名稱:Vertical Timeline
範例展示:http://codyhouse.co/demo/vertical-timeline/index.html

程式簡易使用說明

其實官方網站使用已經解釋得很清楚,每塊時光軸內容是由 <div class="cd-timeline-block">....</div>所構成,只要複製此區塊內容所有相關程式碼,即可快速再產生第二篇內容。
  1. <section id="cd-timeline">
  2.         <div class="cd-timeline-block">
  3.                 <div class="cd-timeline-img">
  4.                         <img src="img/cd-icon-picture.svg" alt="Picture">
  5.                 </div> <!-- cd-timeline-img -->

  6.                 <div class="cd-timeline-content">
  7.                         <h2>Title of section 1</h2>
  8.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
  9.                         <a href="#0" class="cd-read-more">Read more</a>
  10.                         <span class="cd-date">Jan 14</span>
  11.                 </div> <!-- cd-timeline-content -->
  12.         </div> <!-- cd-timeline-block -->

  13.         <div class="cd-timeline-block">
  14.                 <!-- ... -->
  15.         </div>
  16. </section>
複製代碼
有興趣的朋友可以研究一下他的CSS檔,並進行一些適合於自己網站上的調整與修改囉 !

vertical-timeline.zip (59.44 KB, 下載次數: 12)

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.039998 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-12-6 23:17

回頂部