[原创]首次制作JQueryUI插件-Timeline时间轴

特点:
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. 最后的最后这个是给公司做的,所有在时间非常有限的情况下,还是有点定制,后续如果我自己想用,还会改不少东西。代码仅供学习参考,请勿用于实际项目。
[原创]首次制作JQueryUI插件-Timeline时间轴的更多相关文章
- timeline时间轴进度“群英荟萃”
timeline时间轴进度“群英荟萃” 是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 time ...
- vue使用iview Timeline 时间轴不显示问题
vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...
- iOS之TimeLine(时间轴)的实现
这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...
- fiddler笔记:TimeLine时间轴选项卡
1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- Jquery实现超酷的时间轴特效
Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
随机推荐
- Windows Phone 8 开发系列(持续更新中)
1. 从应用列表再次点击应用,如何恢复到上次浏览的页面呢? 2. Windows Phone 文本框的 UpdateSourceTrigger 属性不支持 PropertyChanged 怎么办? 3 ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- MVC学习系列9--控制器接收从视图传递过来的参数
前面学习了,从控制器向视图传递数据,现在学习怎么从视图向控制器传递数据. 通常,我们有两种方式,来处理浏览器的请求,一个是GET方式,一个是POST方式.一般来说,直接通过在浏览器中输入URL话,请求 ...
- QT QTableView用法小结
QTableView常用于实现数据的表格显示.下面我们如何按步骤实现学生信息表格: 一 添加表头 //准备数据模型 QStandardItemModel *student_model = new QS ...
- WPF DataGrid 鼠标双击选中的DataGridRow及Row数据
设置DataGrid的MouseDoubleClick事件 代码 //DataGrid鼠标双击事件 Private void dataGrid_MouseDoubleClick(object send ...
- 引用Microsoft.Office.Interop.Excel出现的问题
引用Microsoft.Office.Interop.Excel出现的问题 转自:http://www.hccar.com/Content,2008,6,11,75.aspx,作者:方继祥 操作背 ...
- 在DOS使用SVN之执行命令整理(TortoiseProc.exe)
原文链接: http://www.cnblogs.com/andrew-blog/archive/2012/08/21/SVN_DOS_Commands.html TortoiseSVN因为所有的命令 ...
- 【工业串口和网络软件通讯平台(SuperIO)教程】一.通讯机制
1.1 应用场景 通讯平台的交互对象包括两方面:第一.与硬件产品交互.第二.与软件产品交互.基本这两方面考虑,通讯平台一般会应用在两个场景: 1)通讯平台应用在PC机上 主要应用在自动站的工控机 ...
- ORCALE数据库自动备份(非数据库备份)
最近项目比较紧:很少写东西了. 这个是我上上个阶段写的一个自动备份的小工具:主要是选择性的备份数据库表结构和表里的数据. 置于工具里面的审计功能下次再介绍吧. 审计数据库结构主要是把表结构的异动都记录 ...
- javascript中的弹框
大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...