zoukankan      html  css  js  c++  java
  • [原创]首次制作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. 最后的最后这个是给公司做的,所有在时间非常有限的情况下,还是有点定制,后续如果我自己想用,还会改不少东西。代码仅供学习参考,请勿用于实际项目。

    下载timeline-1.0

  • 相关阅读:
    2017.0323.数字电路与系统-触发器
    2017.0322.数字电路与系统-触发器
    前端切图|点击按钮div变色
    当鼠标聚焦时输入框变色(focus事件实例)
    ajax实现简单的点击左侧菜单,右侧加载不同网页
    前端切图:自制简易音乐播放器
    移动开发之css3实现背景几种渐变效果
    jQuery实现多种切换效果的图片切换的五款插件
    jQuery实现点击开关图片切换
    三个Bootstrap免费字体和图标库
  • 原文地址:https://www.cnblogs.com/sohobloo/p/3627613.html
Copyright © 2011-2022 走看看