Imitation QQ News by the data source evenly divide the time point slide effect

Imitation QQ News by the data source evenly divide the time point slide effect
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 &lt;= = 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 &lt; 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 &lt; Datalen; i++) {


timepoint.innerhtml + = ' &lt;li&gt;&lt;/li&gt; ';


}


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 &lt; 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].onmouseo Tutorial ver ();


}, 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 &lt; 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 = ' &lt;span&gt; ' + (jsondata[pointindex][' date '] | | ' &lt;/span&gt;&lt;em&gt;&lt;/em&gt; ';


title.innerhtml = ' &lt;a href= ' + (jsondata[pointindex][' href '] | | ' + ' &gt; ' + (jsondata[pointindex][' title '] | | ') + ' &lt;/a&gt; ';


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) &lt; 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);


}


}


}

Tencent News Detail Page has an event progress effect, feel very interesting. So, there is the effect of this article: by the data source evenly divide the time point slide. It took three hours to write, of course, including styling and debugging. Compatible with mainstream, 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 events, fully considered the user experience, when the user quickly (unconsciously move) from the point of view of the time

Look at the entire example source.

&lt;style&gt;


#itimeslide {position:relative;margin:0 20px;padding:15px 0}


#itimeslide #date {display:none;position:absolute;left:74px;top:3px;width:70px}


#itimeslide #date span{display:block;height:14px;padding:0 3px;background: #4e7db3; color: #fff; font-size:12px;line-height:14px}


#itimeslide #date em{display:block;width:5px;height:3px;margin:0 Auto;background:url (yun_qi_img/ 20101224sprite.gif) no-repeat-61px 0}


#itimeslide #timeline {overflow:visible;width:100%;height:2px;margin:16px 0 20px;background: #c7c7c7}


#itimeslide #timeline Li{display:block;position:absolute;left:0;top:24px;width:17px;height:17px;background:url ( Yun_qi_img/20101224sprite.gif) no-repeat 0 0;text-indent:-999px;cursor:pointer}


#itimeslide #timeline li.hover{background-position:-20px 0}


#itimeslide Span#titletop{display:none;position:absolute;top:45px;width:12px;height:8px;background:url (yun_qi_ img/20101224sprite.gif) No-repeat-88px-21px;z-index:1}


#itimeslide #title {display:none;position:absolute;top:52px;padding:15px 10px;background: #f8f8ff; border:1px solid # 708bab;border-radius:5px;-weblit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:3px 3px 3px #c7c7c7;


-moz-box-shadow:3px 3px 3px #c7c7c7}


&lt;/style&gt;


&lt;script&gt;


/*******************************


* @author Mr.think


* @author Blog http://mrthink.net/


* @2010.12.24


* Be free to reprint and use, but please specify the copyright ownership


*******************************/


Raw data json:) is typically passed in by the background


var jsondata=[


{' Date ': ' 2010-12-25 ', ' title ': ' Native JS implementations divide the point-in-time slides by data source ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-11-01 ', ' title ': ' Native JS gets the method ' of element style attribute value ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-10-22 ', ' title ': ' Pure CSS Tutorial implementation list mouse across color ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-09-23 ', ' title ': ' Implement checkbox selection/All-click/select/Line Point ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-09-05 ', ' title ': ' The difference between JS Timer settimeout () and SetInterval () method ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-06-07 ', ' title ': ' Functions that load XML documents (native Web effects and jquery versions) ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-05-09 ', ' title ': ' Limited character input function (JQ version and native JS version) ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-04-13 ', ' title ': ' Odd or even line highlighting and mouse across highlighting class ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-03-01 ', ' title ': ' Structure/performance/behavior completely separate tab (JQ version and native JS version) ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-02-22 ', ' title ': ' Simple click to expand/close effect (native JS version and JQ version) ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-02-01 ', ' title ': ' Website basic optimization: PHP Tutorial gzip compression method ', ' href ': ' http://mrthink.net/'},


{' Date ': ' 2010-01-20 ', ' title ': ' Fade fade picture rotation slide ' based on jquery ', ' href ': ' http://mrthink.net/'}


];





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 &lt; 5 | | arguments.length&gt;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 &lt;= = 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 &lt; 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 &lt; Datalen; i++) {


timepoint.innerhtml + = ' &lt;li&gt;&lt;/li&gt; ';


}


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 &lt; 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 &lt; 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 = ' &lt;span&gt; ' + (jsondata[pointindex][' date '] | | ' &lt;/span&gt;&lt;em&gt;&lt;/em&gt; ';


title.innerhtml = ' &lt;a href= ' + (jsondata[pointindex][' href '] | | ' + ' &gt; ' + (jsondata[pointindex][' title '] | | ') + ' &lt;/a&gt; ';


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) &lt; 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);


}


}


}

Sample Loading the function
Window.onload = function () {
Itimepoint (' itimeslide ', ' Date ', ' Timeline ', ' titletop ', ' title ');
}

</script>

<div id= "Demo" >
<div id= "Itimeslide" >
<div id= "Date" ></div>
<div id= "Timeline" ></div>
<span id= "Titletop" ></span>
<div id= "title" ></div>
</div>
</div>