Native Js realizes the slide effect of time points evenly distributed according to the data source (encapsulated)_javascript skills

It is recommended to view it in standard browsers such as Chrom, Firefox, Opera, Safari, etc. There are no shadows and rounded corners under Ie.

implements the total number of items based on the source data (in the example, a JSON data group), both The separated time points are displayed on the timeline in a smooth rightward animation. When the mouse passes over the time point, the corresponding date and title are displayed. The mouse passes event fully considers the user experience. When the user moves quickly (unintentionally) from When the time point is crossed, the corresponding event will not be triggered.

For related method descriptions and usage, please see the notes below or leave comments. You are also welcome to find bugs and submit them.

Js core code click hereView sample

Copy code The code is as follows:

var JSONData=[{...},{...},...];//Data source, everything is born and dies because of it

function iTimePoint(iTimeSlideId, dateId, timeLineId, titleTop, titleId, defaultShow){
/* Incoming parameter description:
* iTimeSlideId: peripheral ID name. In this sample DOM #itimeslide;
* dateId: date ID name. In this sample DOM #date;
* timeLineId: Time point distribution ID name. In this sample DOM #timeline;
* titleTop: The ID name of the small triangle above the title container. In this sample DOM #titletop;
* titleId: Title container ID name. In this sample DOM #title;
* defaultShow: Set the initial display time point, the default is 0, no value can be passed
*/

//Parameter judgment, for testing, can be deleted after successful operation
if (arguments.length 6) {
alert('Parameter input error, please pass Enter 5 or 6 values! :)');
return false;
}

//General method
var iBase = {
//document.getElementById
Id: function(name){
return document.getElementById(name);
},
//Time point animation display
PointSlide: function(elem, val){
//Can Control the sliding speed by modifying 5 in i =5
for (var i = 0; i (function(){
//This pos definition is very important , if the i obtained directly by using the closure is not the above i
var pos = i;
//Smooth movement
setTimeout(function(){
elem.style.left = pos * val / 100 'px';
}, (pos 1) * 10);
})();
}
},
//Add styles to elements
AddClass: function (elem, val){
//If the element has no class, assign it directly
if (!elem.className) {
elem.className = val;
}else {
//Otherwise Add a new class by adding spaces
var oVal = elem.className;
oVal = ' ';
oVal = val;
elem.className = val;
}
},
//Get element index
Index: function(cur, obj){
for (var i = 0; i if (obj[i] = = cur) {
return i;
}
}
}
}
//The entire function variable definition area
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;//actual width of slide area
var timePoint = document.createElement('ul');//used to store time points ul
var timePointLeft = null;//The distance of the time point relative to the left side of the parent element
var timePointLeftCur = null;//The distance between every two time points
var pointIndex = 0;//The time point is in the queue Index value
var defaultShow = defaultShow || 0;//Default display time
var clearFun=null;//Abort execution when the user swipes unconsciously
var that=null;
/ /Generate corresponding time point html based on the number of data items
for (var i = 0; i timePoint.innerHTML = '

';
}
//Insert time points into the timeline DIV
timeLine.appendChild(timePoint)
var timePoints = timeLine.getElementsByTagName('li');
//Smooth display of time points
for (var i = 0; i //The distance between each two time points
timePointLeftCur = parseInt(iTimeSildeW / (dataLen 1));
/ /Calculate the left margin of the corresponding time point
timePointLeft = (i 1) * timePointLeftCur;
//Initialization of time point animation form
iBase.PointSlide(timePoints[i], timePointLeft);
//Initialization Display time points
setTimeout(function(){
timePoints[defaultShow].onmouseover();
}, 1200);
//Get the default class value of time point and prepare for mouse events
timePoints[i].oldClassName = timePoints[i].className;
timePoints[i].onmouseover = function(){
that = this;//Make sure this in clearFun is the current this
//Improve user experience, do not execute the function when the user swipes unconsciously
clearFun=setTimeout(function(){
//Calculate the index value of the current time point to prepare for the mouse swipe
pointIndex = iBase.Index(that, timePoints);
//Remove the highlight style of the previous time point
for (var m = 0; m if (m ! = pointIndex) {
timePoints[m].className = timePoints[m].oldClassName
}
}
//Load the highlight style for the current time point
iBase.AddClass(that, 'hover');
//Switch date and title value
date.innerHTML = '' (JSONData[pointIndex]['date'] || '') '< ;EM>';
title.innerHTML = '' (JSONData[pointIndex] ['title'] || '') '';
//Change the position of the date and title. The number subtracted here can be adjusted according to the actual style
date.style.left = ((pointIndex 1) * timePointLeftCur - 25) 'px';
titletop.style.left = ((pointIndex 1) * timePointLeftCur 6) 'px';
//When the left margin of the title box is the same as the title box When the sum of widths is greater than the peripheral width, the right side is the absolute point
if ((title.offsetWidth (pointIndex 1) * timePointLeftCur) title.style.left = ((pointIndex 1) * timePointLeftCur - timePointLeftCur) 'px';
}else {
title.style.left = (iTimeSildeW - title.offsetWidth) 'px';
}
//Display date/time point/title
date.style.display = 'block' ;
titletop.style.display = 'block';
title.style.display = 'block';
},200);//200 is the time considered to be passed unconsciously and can be adjusted by yourself
}
timePoints[i].onmouseout = function(){
//If the dwell time is less than 200ms, it is considered as an unconscious swipe and the function is aborted
clearTimeout(clearFun);
}
}
}