jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。

推荐阅读：之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ，它的界面展示效果很不错。

效果展示       源码下载

使用方法

使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件。

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

HTML结构

该时间轴插件的基本HTML结构如下：

<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该时间轴插件。

$(function(){
$().timelinr();
});

配置参数

jquery.timelinr.js时间轴插件的配置参数有：

orientation：时间轴的方向，可选值有：horizontal | vertical默认值为'horizontal'。
containerDiv：时间轴容器DIV的ID选择器。默认为：'#timeline'。
datesDiv：显示时间的容器的ID选择器。默认为：'#dates'。
datesSelectedClass：当前选中时间的class。默认值为：'selected'。
datesSpeed：时间轴的动画速度。值从100-1000，或'slow'，'normal'，'fast'。默认值为：'normal'。
issuesDiv：信息描述的DIV的ID选择器。默认为：'#issues'。
issuesSelectedClass：当前选择的信息描述的DIV的class。默认值为：'selected'。
issuesSpeed：信息描述的DIV的动画速度。值从100-1000，或'slow'，'normal'，'fast'。默认值为：'fast'。
issuesTransparency：信息描述的DIV的透明度。值0-1之间，默认值为0.2。
issuesTransparencySpeed：透明度动画的速度。值从100-1000之间，默认为500。
prevButton：向前按钮的ID选择器。默认为：'#prev'。
nextButton：向后按钮的ID选择器。默认为：'#next'。
arrowKeys：是否允许使用键盘来控制。默认为：false。
startAt：开始的索引下标，默认为1。
autoPlay：是否自动播放。默认为'false'。
autoPlayDirection：自动播放的方向。可选值有：forward | backward。默认值为：'forward'。
autoPlayPause：自动播放的间隔。整数值，1000 = 1秒，默认为2000。
jquery.timelinr.js时间轴插件的github地址为： https://github.com/juanbrujo/jQuery-Timelinr

以上所述是关于jQuery Timelinr实现垂直水平时间轴插件的相关内容，希望对大家有所帮助！

赞 (0)

相关推荐

  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载

    基于jQuery和CSS3制作响应式水平时间轴附源码下载

    我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴. 效果展示     源码下载 HTML 我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日

  • jQuery简易时光轴实现方法示例

    本文实例讲述了jQuery简易时光轴实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>timeLine</title> <style> body{ margin: 0; padding: 0; background: #e8ffe8; } #head, #content, #footer{ width: 100

  • ThinkPHP+jquery实现“加载更多”功能代码

    ThinkPHP+jquery实现“加载更多”功能代码

    ThinkPHP+jQuery实现"加载更多" 在很多web端界面中都会用到点击按钮加载最新几条数据的demo,下例为使用thinkphp+jquery实现实例: 要实现的结果大致如下 第一步 模板文件 <!--软件--> <div class="lists switcher-panel switcher-panel-cur"> <ul class="xinhao"> {volist name="ap

  • 基于JQuery实现滚动到页面底端时自动加载更多信息

    关键代码: 复制代码 代码如下: var stop=true; $(window).scroll(function(){     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     if($(document).height() <= totalheight){         if(stop==true){             stop=false;           

  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览    源码下载 html代码: <div

  • jQuery时间轴插件使用详解

    jQuery时间轴插件使用详解

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: <!-- //设置内容; window.onWebMessage( '{"type":&qu

  • Jquery时间轴特效(三种不同类型)

    Jquery时间轴特效(三种不同类型)

    jquery三种不同类型时间轴切换展示幻灯特效,先给大家展示效果图,喜欢的朋友可以下载源码哦. 查看效果       源码下载 文件引用: <script type="text/javascript" src="jquery.js"></script> <script src="jquery.timelinr-0.9.4.js" type="text/javascript"></scr

  • jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

    jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

    jQuery时间轴插件效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实现的效果.  另外页面中圆形.圆角和三角同样使用了CSS3的特殊样式.这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单.  页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格.单张图片的展示风格和无图片的展示风格.这些可以根据自己的需求

  • jQuery代码实现发展历程时间轴特效

    jQuery代码实现发展历程时间轴特效

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.有效果图有实现代码给大家展示如下: html代码: <div id="timeline"> <ul id="issues"> <li id="1900"> <img src="images/img4.jpg" width="436" height="300"

  • 利用Jquery实现几款漂亮实用的时间轴(附示例代码)

    利用Jquery实现几款漂亮实用的时间轴(附示例代码)

    前言 最近在项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊! 时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中.时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记. 下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵

  • jQuery插件Timelinr 实现时间轴特效

    jQuery插件Timelinr 实现时间轴特效

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

  • jQuery+AJAX实现无刷新下拉加载更多

    随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css  和简单js交互. js  code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t

  • TimergliderJS 一个基于jQuery的时间轴插件

    Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

随机推荐