原生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...