特点:

1. 支持多左右滚动,左右拖动。

2. 时间轴可上下两种显示方式。

3. 支持两种模式的平滑滚动/拖动。

4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能)。

5. 支持hover辅助线。

6. 支持多级缩放、鼠标滚轮缩放。

依赖:

jquery 1.11

jquer-ui 1.10

jquery-mousewheel

兼容:

Chrome、Firefox、IE8(没有圆角和阴影效果)

已知问题:

刻度图片和拖动画布时的鼠标图标可能会失效。原因是这个是写在js里设置的url,而url可能定位不准,不过在DEMO中因为路径是对的没有此问题。截止写这篇文章,刻度图片的问题已经解决,但上传的源代码还木有哦 - -|||。

比较有价值的点:

1. 平滑滚动/拖动的Advance模式,这里用到了一些小技巧,通过计算鼠标按下和松开的时间和距离(拖动),或者计算鼠标按下的持续时间(滚动),获得一个加速度,最后计算惯性距离,通过动画实现平滑,基本的初中物理学知识拿粗来用一下还是可以的哈哈。

2. 多级缩放时参考了一些响应式的设计思想,刻度条的刻度、文字等会有不同表现。

3. 行压缩算法,这个可能并不能算很高效的算法,毕竟我只能按照正常思维设计算法,然后再来优化。

4. 刻度计算算法,这个还有优化空间。

5. 因为第一次做JQuery-UI的插件,标准插件的开发方法和过程对我自己来说也是宝贵的经验。

6. 一些用户体验学的经验和设计自己感觉还比较满意,比如乱序动画等增加视觉效果、物理学平滑滚动等增加使用便捷度。

7. 最后骂一下坑爹的IE8,因为你如此奇葩,我特意为你准备了一个可爱的function叫“_fixIE8Height”,泥煤的!

8. 最后的最后这个是给公司做的,所有在时间非常有限的情况下,还是有点定制,后续如果我自己想用,还会改不少东西。代码仅供学习参考,请勿用于实际项目。

下载timeline-1.0

[原创]首次制作JQueryUI插件-Timeline时间轴的更多相关文章

  1. timeline时间轴进度“群英荟萃”

    timeline时间轴进度“群英荟萃”  是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 time ...

  2. vue使用iview Timeline 时间轴不显示问题

    vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...

  3. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  4. fiddler笔记:TimeLine时间轴选项卡

    1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...

  5. 利用css制作横向和纵向时间轴

    Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...

  6. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

  7. JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  8. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

  9. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

随机推荐

  1. ASP.NET MVC post请求接收参数的三种方式

    1.在控制器中建立一个PostDemo方法,建立视图创建一个表单 <h2>PostDemo</h2> name的值:@ViewBag.name <br /> nam ...

  2. WebView JS与RN进行通讯

    RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间 ...

  3. 五小步让VS Code支持AngularJS智能提示

    本文想通过配置VS Code来实现对AngularJS的智能提示.在一般的情况下对于在HTML页面是支持提示的.但是在js页面就不是很友好,它是记忆你之前的输入,要是之后有重复的输入,VS Code会 ...

  4. jquer 事件,选择器,dom操作

    一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...

  5. redis+cookies实现session机制(解决 手机浏览器不自动回传cookies导致session不可用问题)

    昨天在手机端测试自己的项目遇到如下情况. 1.在手机上(苹果qq浏览器),登陆时存在session中的图片验证码结果,一直获取不到,考虑是cookies的问题.但是其他网站有貌似可以正常使用cooki ...

  6. C#基础-文件夹复制与删除

    代码来源:http://blog.163.com/u_tommy_520/blog/static/20406104420147493933662/ 最近做MVC网站时刚好用到,用以提供一个完整的文件夹 ...

  7. Unity3D 5.x 简单实例 - 发射炮弹

    1,下载.安装: http://unity3d.com/cn/get-unity/download/archive 建议直接借助 UnityDownloadAssistant 进行安装,根据需要勾选需 ...

  8. Git 获取文件操作

    1. 在本地新建存放源代码的文件夹: 2. 进入文件夹下,右击选择 Git Bash Here ,弹出git命令行窗口: 3. 运行指定 git init,初始化git: 4. git  remote ...

  9. bzoj 1001狼抓兔子(对偶图+最短路)最大流

    推荐文章:<浅析最大最小定理在信息学竞赛中的应用>--周冬 题目 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还 ...

  10. [注意]SerialPort操作PCI-1621D多串口卡,出现异常"参数不正确"

    开发LED大屏显示.40-20mA模拟量输出的时候,经常要与串口打交道.但是Windows自带的SerialPort串口操作组件貌似兼容性 不是太好,或是SerialPort本身有BUG,在操作PCI ...