[javascript] 很棒的時間軸ui控制項 （純javascript，跨瀏覽器，有媲美flash的動畫）

傳送門

 

時間練利用兩個時間之間的差別與整個時間軸的長度運算得來

locateHandler = function () {var referTime = (that[that.length] - that[0]) / 86400000, i = 0, len = that.handler.length, temp = 0;for (; i < len;) {temp = ((that[i] - that[0]) / (referTime * 86400000)) * that.parent.offsetWidth;that.fx(that.handler[i], 'left', ((i === len - 1 || i === 0) ? temp - 20 : temp), 50);i++;}

為了減少計算次數，使用者操作時把圖文面板，時間點，還有時間的位置資訊都儲存起來，這樣在使用者操作時計算並儲存，第二次操作時讀取緩衝的位置資訊。直接用css設定位置減少運算量

cache = [[],[],[]]

初始化時只有一組資訊

 

觸摸了2個時間點以後，位置資料已經被緩衝起來了

 

if (!indicator.cache[1][index]) {if ((rect.left - div.offsetWidth / 2) < limit.left) {indicator.cache[1][index] = 'visibility:visible;left:0px;';} else if ((rect.left + div.offsetWidth / 2) > limit.right) {indicator.cache[1][index] = 'visibility:visible;left:' + (limit.right - div.offsetWidth - limit.left) + 'px;';} else {indicator.cache[1][index] = 'visibility:visible;left:' + (rect.left - div.offsetWidth / 2 - limit.left) + 'px;';}}

圖文面板的位置也是經過智能計算擷取，如果超出左邊則靠左對齊，其他情況則以時間點位參考置中，右邊超出亦然

　　

動畫使用了tween的一些演算法 可以自己修改