jquery垂直時間軸 外掛程式

提取碼：9fmc

jquery時間軸-這是乙個簡單的響應時間軸交替的顏色標籤。乙個圖示字型用於在時間軸上的圖示的航點和**查詢一些例子說明如何調整的時間表較小的螢幕。時間軸的主要結構是乙個無序列表。

使用步驟

html

@font-face  /* made with  */

.cbp_tmtimeline  
/* the line */
.cbp_tmtimeline:before 
.cbp_tmtimeline > li 
/* the date/time */
.cbp_tmtimeline > li .cbp_tmtime 
.cbp_tmtimeline > li .cbp_tmtime span 
.cbp_tmtimeline > li .cbp_tmtime span:first-child 
.cbp_tmtimeline > li .cbp_tmtime span:last-child 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child 
/* right content */
.cbp_tmtimeline > li .cbp_tmlabel 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel 
.cbp_tmtimeline > li .cbp_tmlabel h2 
/* the ******** */
.cbp_tmtimeline > li .cbp_tmlabel:after 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after 
/* the icons */
.cbp_tmtimeline > li .cbp_tmicon 
.cbp_tmicon-phone:before 
.cbp_tmicon-screen:before 
.cbp_tmicon-mail:before 
.cbp_tmicon-earth:before 
/* example media queries */
@media screen and (max-width: 65.375em) }  
@media screen and (max-width: 47.2em) 
.cbp_tmtimeline > li .cbp_tmtime 
.cbp_tmtimeline > li .cbp_tmtime span 
.cbp_tmtimeline > li .cbp_tmlabel 
.cbp_tmtimeline > li .cbp_tmlabel:after 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after 
.cbp_tmtimeline > li .cbp_tmicon    
}

時間軸外掛程式

這是一款可用於展示歷史和計畫的時間軸外掛程式，尤其比較適合一些 展示發展歷程 大事件等場景。該外掛程式基於jquery，可以滑動切換 水平和垂直滾動 支援鍵盤方向鍵。經過擴充套件後可以支援滑鼠滾輪事件。檢視演示 html 我們在body中建立乙個div timeline作為展示區，dates為時間軸...

jquery封裝的時間軸

概述 很多時候，都會用到類似於時間軸的東西，鑑於網路資源沒有那麼順手，就想著自己搞乙個，在此將原始碼貼出來。效果 樣式檔案style.css timeline timeline ul.ulvec timeline ul li.livec timeline ul.ulhor timeline ul l...

10個完成工作的jquery 時間軸外掛程式

在進行設計的時候經常需要用到時間軸效果，如果遇到這樣的問題不會解決怎麼辦，今天就給大家分享這樣的效果 使用jquery timelinr外掛程式的，你會擺脫那些枯燥的演講的時間表。有了它的幫助，你就可以建立縱向和橫向的布局，再加上調整一些額外的引數，如時間，速度和視覺外觀的時間軸。由於faceboo...