建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
很棒的時間線ui控件（純javascript）
效果預覽：
創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站設計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元隆回做網(wǎng)站,已為上家服務,為隆回各地企業(yè)和個人服務,聯(lián)系電話:18982081108
在線預覽：傳送門
時間練利用兩個時間之間的差別與整個時間軸的長度運算得來
- 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++;
- }
為了減少計算次數(shù)，用戶操作時把圖文面板，時間點，還有時間的位置信息都儲存起來，這樣在用戶操作時計算并儲存，第二次操作時讀取緩存的位置信息。直接用css設置位置減少運算量
| cache = [[],[],[]] |
初始化時只有一組信息
觸摸了2個時間點以后，位置數(shù)據(jù)已經(jīng)被緩存起來了
- 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;';
- }
- }
圖文面板的位置也是經(jīng)過智能計算獲取，如果超出左邊則左對齊，其他情況則以時間點位參考居中，右邊超出亦然
動畫使用了tween的一些算法 可以自己修改。
分享文章：很棒的時間線ui控件（純javascript）
分享網(wǎng)址：http://www.5511xx.com/article/dheieoe.html
