Timelinr简单的时间线jQuery插件

问说网 · 发布于 2016-07-04 · 字数3222 · 浏览 1311 · 评论 0

Timelinr是一个简单的时间线jQuery插件,这个简单的插件可以帮助你给更多的生活无聊的时间线。支持水平和垂直布局,你可以为大多数属性指定参数:速度,透明度等。

Timelinr简单的时间线jQuery插件

使用方法

引入jQuery库和Timelinr插件

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

编写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>

最后初始化插件

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

可选参数

$(function(){
    $().timelinr({
        orientation: 'horizontal',
        // value: horizontal | vertical, default to horizontal
        containerDiv: '#timeline',
        // value: any HTML tag or #id, default to #timeline
        datesDiv: '#dates',
        // value: any HTML tag or #id, default to #dates
        datesSelectedClass: 'selected',
        // value: any class, default to selected
        datesSpeed: 'normal',
        // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
        issuesDiv : '#issues',
        // value: any HTML tag or #id, default to #issues
        issuesSelectedClass: 'selected',
        // value: any class, default to selected
        issuesSpeed: 'fast',
        // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
        issuesTransparency: 0.2,
        // value: integer between 0 and 1 (recommended), default to 0.2
        issuesTransparencySpeed: 500,
        // value: integer between 100 and 1000 (recommended), default to 500 (normal)
        prevButton: '#prev',
        // value: any HTML tag or #id, default to #prev
        nextButton: '#next',
        // value: any HTML tag or #id, default to #next
        arrowKeys: 'false',
        // value: true/false, default to false
        startAt: 1,
        // value: integer, default to 1 (first)
        autoPlay: 'false',
        // value: true | false, default to false
        autoPlayDirection: 'forward',
        // value: forward | backward, default to forward
        autoPlayPause: 2000
        // value: integer (1000 = 1 seg), default to 2000 (2segs)< });
    });
});

相关链接

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2014-12-16WordPress显示同分类的其他文章
  • 2015-12-02jQuery.AutoComplete基于jQuery的自动补全插件
  • 2016-02-02Node-Weibo基于Node.js的微博JavaScript版本SDK
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2015-08-08SQLite数据库Btree结构分析
  • 2016-04-02详解JavaScript中面向对象基础知识
  • 2016-04-17推荐三款Photoshop常用的辅助插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2014-12-10

    Ecshop商城多国语言修改方法

    现在越来越国际化,多国语言似乎是一个发展的趋势,把商品卖到国外,赚老外的美元,但是ecshop如何实现多国语言呢?可以在首页切换语言,其实实现起来也挺简单的,下…

    十分钟搞清字符集和字符编码
    问说网 · 发布于 2016-07-15

    十分钟搞清字符集和字符编码

    在介绍字符集之前,我们先了解下为什么要有字符集。我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流。

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    谈谈那些年PHP中非常牛的验证码
    问说网 · 发布于 2016-03-30

    谈谈那些年PHP中非常牛的验证码

    验证码已经是现在网站中非常基础的知识点了,验证码的存在可以防止恶意破解密码、刷票、灌水,可以有效的防止暴力破解特定用户,现在就来了解谈谈那些年PHP中非常牛的验…

    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    引领设计潮流!学习响应式设计需要注意这几点

    在响应式设计中,我们不仅要考虑以前桌面用户的使用习惯,也必须兼顾不同尺寸的设备。比如大家在PC上习惯使用的浮层在某些小尺寸的设备上就没法使用了,因此我们可以做到…

    • 引领设计潮流!学习响应式设计需要注意这几点
    • 引领设计潮流!学习响应式设计需要注意这几点
    • 引领设计潮流!学习响应式设计需要注意这几点
    • 引领设计潮流!学习响应式设计需要注意这几点
    梦婕 · 发布于 2016-05-16 · 浏览 886 · 评论 0
    简约不简单 · 发布于 2016-05-17

    如何制作一枚流光溢彩的界面

    如何制作一枚流光溢彩的界面,转载自站酷网,制作一个绚丽高光的下载进度条界面,这个教程非常实用,适合初级的PS学习者。

    问说网 · 发布于 2016-06-06

    PHP遍历目录的三种方法

    我们有时候需要读取目录里面的内容,在PHP有多个函数可以获取文件系统目录信息,今天就给大家分享PHP遍历目录的三种方法,对于上面提到的3个函数,对执行速度没有做…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13086 文章
    493 评论
    1865 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1574

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1506

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1521

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1026

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1216

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!