
特點:
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. 最后的最后這個是給公司做的,所有在時間非常有限的情況下,還是有點定制,后續如果我自己想用,還會改不少東西。代碼僅供學習參考,請勿用於實際項目。
