原生JS實現按資料來源均分時間點幻燈效果

2021-09-01 17:52:10 字數 2302 閱讀 8273

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()


}}
var jsondata=[


,	,,	,


,	,,	,


,	,	,	


];
window.onload = function()

原生Js實現按資料來源均分時間點幻燈效果 已封裝

點此檢視樣例 var jsondata 資料來源,一切皆因它而生,因它而滅 function itimepoint itimeslideid,dateid,timelineid,titletop,titleid,defaultshow 通用方法 var ibase 時間點動畫顯示 pointslid...

實現多資料來源事務

最近在重構專案中，需要相容多資料來源，故此實現下多資料來源事務。這次重構專案中，為了支援後續龐大的資料量接入，更迭了資料庫，但是為了要相容老版本，也不能直接拿掉老的資料庫。所以就有了相容多資料來源的需求，尤其是要保證事務。其實這個需求就是要實現分布式事務，但是我們的這個場景是在乙個服務內，所以可以利...

logstash 實現資料來源分流

logstash filebeat 將 不同的資料分發到不同的地方 logstash配置檔案 first pipeline.conf 1 input 5 6filter 10 11mutate 14mutate 17 level 18 log path 19 function 20 dev mess...