首页 | 母婴育儿 | 动漫 | 财经 | 音乐 | 家居 | 娱乐 | 文化 | 历史 | 情感 | 星座运势 | 综合 | 旅游 | 科技 | 体育 | 军事 | 美食 | 教育 | 游戏 | 时事 | 搞笑 | 宠物 | 健康养生 | 社会 | 时尚 | 汽车 | 国际 |
澳门海冠娱乐 - jQuery类似于幻灯片效果的水平时间轴特效源码解析/代码下载
发稿时间:2019-12-25 10:51:55 枣巷新漭新闻网

澳门海冠娱乐 - jQuery类似于幻灯片效果的水平时间轴特效源码解析/代码下载

澳门海冠娱乐,这是一款设计非常精美的jquery和css3水平时间轴特效插件。该水平时间轴在设计上将时间轴和事件内容分离,时间轴在工作上类似幻灯片效果,而某个时间点对应的事件占据整个时间轴的宽度,并且一次只显示一个事件内容。

jquery类似于幻灯片效果的水平时间轴特效源码解析/代码下载

该水平时间轴的html结构包括两个部分:一个是时间轴日期,另一个是相应的事件。ul.cd-timeline-navigation元素用于导航箭头,span.filling-line用于当一个新的事件时间点被选择的时候的时间轴填充效果。

在水平时间轴的事件内容的样式中,所有的事件内容项都是从右边进入,开始时他们位于右侧视口的边缘(translatex(-100%))。当某个时间点被选择的时候,相应的事件内容会被添加.selected class,该class会将这些内容移动会屏幕中(translatex(0))。

有4个class用于创建幻灯片动画效果:.enter-right / .leave-left class用于事件内容向左或向右移出视口。这些class被应用2种不同的动画:cd-enter-right(用于 .enter-right和.leave-left),cd-enter-left(用于.enter-left和.leave-right)。

对于时间轴,沿时间轴上的日期是使用jquery设置上去的。时间轴上的日期分布并不是均匀的,但是这些日期之间的距离比例是一致的。

jquery类似于幻灯片效果的水平时间轴特效源码解析/代码下载

在main.js文件中,使用变量eventsmindistance来设置两个连续的最小日期之间的距离。在代码中设置的是eventsmindistance = 60 ,表示最小距离为60像素。然后需要获取一个日期和下一个日期之间的差值,为了获取这些值,特效中为每一个日期都添加了data-date属性。最小距离将会作为参考来计算两个连续日期之间的距离。

举个例子,假设最小的日期间隔为5天,那么在水平时间轴上5天之间的两个时间点距离为60像素,而10天的距离就为120像素。

对于日期格式,插件中使用的日期格式为dd/mm/yyyy,如果需要你也可以添加时分秒。你可以使用以下3种不同的日期格式:

最后需要注意的是,时间轴日期上使用的data-date属性也会被设置到代表事件的项中,这样当用户在时间轴上旋转了一个日期之后,相应的事件项才能被显示。

源码演示/下载请点击了解更多

↓↓↓↓↓↓

杨坝资讯