點此檢視樣例
var jsondata=[,,...];//資料來源,一切皆因它而生,因它而滅function itimepoint(itimeslideid, dateid, timelineid, titletop, titleid, defaultshow)
//通用方法
var ibase = ,
//時間點動畫顯示
pointslide: function(elem, val), (pos + 1) * 10);
})();}},
//為元素新增樣式
addclass: function(elem, val)else
},//獲取元素索引
index: function(cur, obj)}}
}//整個函式變數定義區
var datalen = jsondata.length;
var itimesilde = ibase.id(itimeslideid);
var date = ibase.id(dateid);
var timeline = ibase.id(timelineid);
var titletop = ibase.id(titletop);
var title = ibase.id(titleid);
var itimesildew = itimesilde.offsetwidth;//幻燈區實際寬度
var timepoint = document.createelement('ul');//用來儲存時間點的ul
var timepointleft = null;//時間點相對于父元素左邊距離
var timepointleftcur = null;//每兩個時間點間距
var pointindex = 0;//時間點在佇列中的索引值
var defaultshow = defaultshow || 0;//預設顯示的時間
var clearfun=null;//當使用者無意識的劃過時中止執行
var that=null;
//根據資料條數生成對應的時間點html
for (var i = 0; i < datalen; i++)
//將時間點插入到時間線div中
var timepoints = timeline.getelementsbytagname('li');
//時間點平滑顯示
for (var i = 0; i < timepoints.length; i++) , 1200);
//獲取時間點預設class值,為滑鼠事件做準備
timepoints[i].oldclassname = timepoints[i].classname;
timepoints[i].onmouseover = function()
}//為當前時間點載入高亮樣式
ibase.addclass(that, 'hover');
//切換日期及標題值
date.innerhtml = '' + (jsondata[pointindex]['date'] || '') + '
'; title.innerhtml = '' + (jsondata[pointindex]['title'] || '') + '';
//改變日期及標題的位置,此處減去的數字,可根據實際樣式調整
date.style.left = ((pointindex + 1) * timepointleftcur - 25) + 'px';
titletop.style.left = ((pointindex + 1) * timepointleftcur + 6) + 'px';
//當標題框左邊距與標題框寬度之和大於外圍寬度時,以右邊為絕對點
if ((title.offsetwidth + (pointindex + 1) * timepointleftcur) < itimesildew) else
//顯示日期/時間點/標題
date.style.display = 'block';
titletop.style.display = 'block';
title.style.display = 'block';
},200);//200為認定無意識劃過的時間,可自行調節
}timepoints[i].onmouseout = function()
}}
原生JS實現按資料來源均分時間點幻燈效果
var jsondata 資料來源,一切皆因它而生,因它而滅 function itimepoint itimeslideid,dateid,timelineid,titletop,titleid,defaultshow 通用方法 var ibase 時間點動畫顯示 pointslide funct...
實現多資料來源事務
最近在重構專案中，需要相容多資料來源，故此實現下多資料來源事務。這次重構專案中，為了支援後續龐大的資料量接入，更迭了資料庫，但是為了要相容老版本，也不能直接拿掉老的資料庫。所以就有了相容多資料來源的需求，尤其是要保證事務。其實這個需求就是要實現分布式事務，但是我們的這個場景是在乙個服務內，所以可以利...
logstash 實現資料來源分流
logstash filebeat 將 不同的資料分發到不同的地方 logstash配置檔案 first pipeline.conf 1 input 5 6filter 10 11mutate 14mutate 17 level 18 log path 19 function 20 dev mess...