It is recommended to view in standard browsers such as Chrom,firefox,opera,safari. IE there is no shadow and rounded corners.
Implemented according to the source data (in the sample is a JSON data group) total number of bars, all of the time point to smooth the right animation display on the timeline, when the mouse across the time point, display the corresponding date and title. Mouse across the event, fully considered the user experience, when the user quickly (unconsciously moving) from the point of view of the time, does not trigger the corresponding event.
Please refer to the comments below or comment on the relevant method description and use, and also welcome to find bugs and submit.
var jsondata=[{...},{...},...];/ /data source, everything is born of it, it is destroyed
function Itimepoint (Itimeslideid, DateID, Timelineid, Titletop, TitleID, defaultshow) {
/* Incoming parameter description:
* Itimeslideid: Perimeter ID name. This sample is #itimeslide in DOM;
* DateID: Date ID name. This sample is #date in DOM;
* Timelineid: Time point distribution ID name. This sample is #timeline in DOM;
* Titletop: Small triangle ID name above the title container. This sample is #titletop in DOM;
* TitleID: Title container ID name. This sample is #title in DOM;
* Defaultshow: Set the initial display point of time, the default is 0, can not pass the value
*/
Parameter judgment, test use, after successful operation can be deleted
if (Arguments.length < 5 | | arguments.length>6) {
Alert (' parameter passed in error, please pass in 5 or 6 values!:) ');
return false;
}
Common methods
var ibase = {
document.getElementById
Id:function (name) {
return document.getElementById (name);
},
Point in time animation display
Pointslide:function (Elem, Val) {
The sliding speed can be controlled by modifying the 5 in the i+=5
for (var i = 0; I <= = 5) {
(function () {
This POS definition is very important, and if you get it directly using the closure it's not the top I
var pos = i;
Smooth movement
settimeout (function () {
Elem.style.left = pos * val/100 + ' px ';
}, (pos + 1) * 10);
})();
}
},
Add a style to an element
Addclass:function (Elem, Val) {
If the element has no class, the value is directly assigned
if (!elem.classname) {
Elem.classname = val;
}else {
Otherwise, add a new class by adding a space
var oVal = Elem.classname;
OVal + = ';
OVal + = val;
Elem.classname = val;
}
},
Get element Index
Index:function (cur, obj) {
for (var i = 0; i < obj.length; i++) {
if (obj[i] = = cur) {
return i;
}
}
}
}
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;//Slide area actual width
var timepoint = document.createelement (' ul ');//To store the time point of the UL
var timepointleft = null;//Time point relative to the left of the parent element
var timepointleftcur = null;//Every two points of time spacing
var pointindex = 0;//index value of the time point in the queue
var defaultshow = Defaultshow | | 0;//The default display time
var clearfun=null;//stop execution when the user unconsciously crosses
var that=null;
Generate corresponding Point-in-time HTML based on the number of data bars
for (var i = 0; i < Datalen; i++) {
timepoint.innerhtml + = ' <li></li> ';
}
Inserting a point in the timeline div
Timeline.appendchild (Timepoint)
var timepoints = timeline.getelementsbytagname (' li ');
Point-in-time Smooth Display
for (var i = 0; i < timepoints.length; i++) {
Spacing between each two time points
Timepointleftcur = parseint (Itimesildew/(Datalen + 1));
Calculate the left margin of the corresponding point in time
Timepointleft = (i + 1) * timepointleftcur;
Time-point Animation form initialization
Ibase.pointslide (Timepoints[i], timepointleft);
Initial display point in time
settimeout (function () {
Timepoints[defaultshow].onmouseover ();
}, 1200);
Get the Point-in-time default class value to prepare for mouse events
Timepoints[i].oldclassname = Timepoints[i].classname;
Timepoints[i].onmouseover = function () {
that = this;//Make sure the this in Clearfun is the current this
Enhance the user experience, when the user inadvertently row out of function
Clearfun=settimeout (function () {
Calculates the current Point-in-time index value, prepares for mouse draw
PointIndex = Ibase.index (that, timepoints);
Remove last Point-in-time Highlight style
for (var m = 0; m < timepoints.length; m++) {
if (M!= pointindex) {
Timepoints[m].classname = Timepoints[m].oldclassname
}
}
Load a highlight style for the current point in time
Ibase.addclass (that, ' hover ');
Toggle Date and Caption Values
date.innerhtml = ' <span> ' + (jsondata[pointindex][' date '] | | ' </span><EM></EM> ';
title.innerhtml = ' <a href= ' + (jsondata[pointindex][' href '] | | ' + ' > ' + (jsondata[pointindex][' title '] | | ') + ' </a> ';
Change the position of the date and the title, minus the number, 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 larger than the width of the title box and is greater than the perimeter width, the right is the absolute point
if ((Title.offsetwidth + (PointIndex + 1) * Timepointleftcur) < Itimesildew) {
Title.style.left = ((PointIndex + 1) * timepointleftcur-timepointleftcur) + ' px ';
}else {
Title.style.left = (itimesildew-title.offsetwidth) + ' px ';
}
Show Date/Time Point/title
Date.style.display = ' block ';
Titletop.style.display = ' block ';
Title.style.display = ' block ';
},200);//200 to determine the time of the unconscious, can be adjusted
}
Timepoints[i].onmouseout = function () {
If stay less than 200ms, identified as unconscious across, abort function
Cleartimeout (Clearfun);
}
}
}
