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