基于jQuery和CSS3制作响应式水平时间轴附源码下载_jquery(CSDN博客)
我們經(jīng)常看到有很多的垂直時間軸用來記錄事件進(jìn)展，而有朋友問我要求分享水平的時間軸，其實水平時間軸的難點在于自適應(yīng)屏幕尺寸。那么 今天我要給大家分享的是一款支持響應(yīng)式、支持觸屏手勢滑動的水平時間軸。
效果展示 源碼下載
HTML
我們的HTML結(jié)構(gòu)由兩部分組成，div.timeline用于放置日期導(dǎo)航水平線，它有水平多個日期div.events-wrapper和水平軸左右方向?qū)Ш桨粹oul.cd-timeline-navigation組成。而div.events-content放置的是多個日期對應(yīng)的事件節(jié)點，它又多個li元素組成，li元素里面可以放置圖片文字等任意HTML內(nèi)容。注意這兩部分的html的li中都有data-date屬性，它的值是一個日期，正是通過data-date屬性將導(dǎo)航水平線與日期對應(yīng)的事件內(nèi)容關(guān)聯(lián)起來的。
- 16 Jan
- 28 Feb
標(biāo)題
January 16th, 2014文字或者圖片等任意HTML內(nèi)容
登錄后復(fù)制
CSS
來看時間軸事件的css設(shè)計，所有的事件節(jié)點初始都在視圖之外，就是看不到的，除了.selected當(dāng)前選中的日期節(jié)點。我們使用.enter-right/.enter-left來為事件節(jié)點進(jìn)入視圖時添加動畫，使用.leave-right/.leave-left來為事件節(jié)點離開視圖時添加動畫。本例運用了很多CSS3動畫效果，請看代碼：
.cd-horizontal-timeline .events-content {
position: relative;
}
.cd-horizontal-timeline .events-content li {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
transform: translateX(-100%);
opacity: 0;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
/* visible event content */
position: relative;
z-index: 2;
opacity: 1;
transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
animation-direction: reverse;
}
@keyframes cd-enter-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
登錄后復(fù)制
JS
在main.js中，根據(jù)每兩個日期之間間隔的長短來調(diào)整日期導(dǎo)航條上兩個日期節(jié)點的距離，當(dāng)然要設(shè)置一個最小值(px)，以及根據(jù)data-date屬性獲取日期，并將日期做格式化處理。使用jQuery實現(xiàn)點擊左右導(dǎo)航按鈕來實現(xiàn)事件內(nèi)容的滑動效果，具體代碼由于比較多，就不在這里占用篇幅了，請大家下載源碼查看main.js里的代碼詳情，不做任何修改直接可以拿去應(yīng)用到你的項目中去。
總結(jié)
以上是生活随笔為你收集整理的基于jQuery和CSS3制作响应式水平时间轴附源码下载_jquery(CSDN博客)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手把手教你如何使用ps文字添加涂鸦效果（
- 下一篇： sphinx scws 全文检索 安装