[原创]首次制作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 ...
随机推荐
- 写出好的 commit message
为何要关注提交信息 加快Reviewing Code的过程 帮助我们写好release note 5年后帮你快速想起来某个分支,tag或者 commit增加了什么功能,改变了哪些代码 让其他的开发者在 ...
- 实际案例:在现有代码中通过async/await实现并行
一项新技术或者一个新特性,只有你用它解决实际问题后,才能真正体会到它的魅力,真正理解它.也期待大家能够多分享解一些解决实际问题的内容. 在我们遭遇“黑色30秒”问题的过程中,切身体会到了异步的巨大作用 ...
- 强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
- 基于.net mvc 的供应链管理系统(YB-SCM)开发随笔1-开篇
作为开篇之作,先把这个项目的介绍和一些技术点给各位. 1.项目所用到的技术 (1)前台展示:ASP.NET MVC 3.0+Jquery+Sea+Bootstrap等 (2)开发环境:VS2012/V ...
- Mule入门基础
Mule入门文档 零.前提 在按照本文进行操作之前,假设您的系统已经具备以下前提: 已经安装了Sun公司的JDK1.4或JDK5.0版本,推荐使用JDK5.0. 正确设置了JAVA_HOME环境变量到 ...
- Android Studio创建AVD
Android Studio是专门为Android开发设计的IDE,比Eclipse开发Android更加方便.快捷. 安装Android Studio以后,想运行AVD,出现了下面的错误: 提示没有 ...
- 使用NPOI读取Excel到DataTable
一.NPOI介绍: 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office ...
- 使用jenkins配置.net mvc网站进行持续集成一
最近好久没有更新文章了,因为好久没有写代码了,以至于我不知道同大家分享些什么,刚好,今天突然叫我学习下jenkins每日构建,我就把今天的学习笔记记录下来,这其中很多东西都是公司同事之前调研总结的,我 ...
- 弄一个ajax笔记方便查询-$.ajax()
$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表: 参数 类型 说 ...
- [deviceone开发]-一个固定列,可以上下左右滑动的表格示例
一.简介 一个类型table的例子,第一列和第二列可以固定,剩下的后面的很多列都可以左右滑动,也可以上下滑动,这种需求一般是为了展示多列表格数据.这个例子是通过二大部分: 左边是一个普通的listvi ...