var JSONData=[{...},{...},...];//數(shù)據(jù)源,一切皆因它而生,因它而滅

function iTimePoint(iTimeSlideId, dateId, timeLineId, titleTop, titleId, defaultShow){
/* 傳入?yún)?shù)說明:
* iTimeSlideId: 外圍ID名. 本樣例DOM中#itimeslide;
* dateId: 日期ID名. 本樣例DOM中#date;
* timeLineId: 時(shí)間點(diǎn)分布ID名. 本樣例DOM中#timeline;
* titleTop: 標(biāo)題容器上方小三角ID名. 本樣例DOM中#titletop;
* titleId: 標(biāo)題容器ID名. 本樣例DOM中#title;
* defaultShow: 設(shè)定初始顯示的時(shí)間點(diǎn), 默認(rèn)為0, 可不傳值
*/

//參數(shù)判斷,測試用,成功運(yùn)行后可刪除
if (arguments.length < 5 || arguments.length>6) {
alert('參數(shù)傳入錯(cuò)誤,請傳入5或6個(gè)值! :)');
return false;
}

//通用方法
var iBase = {
//document.getElementById
Id: function(name){
return document.getElementById(name);
},
//時(shí)間點(diǎn)動畫顯示
PointSlide: function(elem, val){
//可通過修改i+=5中的5控制滑動速度
for (var i = 0; i <= 100; i += 5) {
(function(){
//這個(gè)pos定義很重要,若直接使用閉包獲取到的不是上面的i
var pos = i;
//平滑移動
setTimeout(function(){
elem.style.left = pos * val / 100 + 'px';
}, (pos + 1) * 10);
})();
}
},
//為元素添加樣式
AddClass: function(elem, val){
//若元素?zé)oclass,直接賦值
if (!elem.className) {
elem.className = val;
}else {
//否則通過添加空格新增一個(gè)class
var oVal = elem.className;
oVal += ' ';
oVal += val;
elem.className = val;
}
},
//獲取元素索引
Index: function(cur, obj){
for (var i = 0; i < obj.length; i++) {
if (obj[i] == cur) {
return i;
}
}
}
}
//整個(gè)函數(shù)變量定義區(qū)
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;//幻燈區(qū)實(shí)際寬度
var timePoint = document.createElement('ul');//用來存儲時(shí)間點(diǎn)的ul
var timePointLeft = null;//時(shí)間點(diǎn)相對于父元素左邊距離
var timePointLeftCur = null;//每兩個(gè)時(shí)間點(diǎn)間距
var pointIndex = 0;//時(shí)間點(diǎn)在隊(duì)列中的索引值
var defaultShow = defaultShow || 0;//默認(rèn)顯示的時(shí)間
var clearFun=null;//當(dāng)用戶無意識的劃過時(shí)中止執(zhí)行
var that=null;
//根據(jù)數(shù)據(jù)條數(shù)生成對應(yīng)的時(shí)間點(diǎn)html
for (var i = 0; i < dataLen; i++) {
timePoint.innerHTML += '<li></li>';
}
//將時(shí)間點(diǎn)插入到時(shí)間線DIV中
timeLine.appendChild(timePoint)
var timePoints = timeLine.getElementsByTagName('li');
//時(shí)間點(diǎn)平滑顯示
for (var i = 0; i < timePoints.length; i++) {
//每兩個(gè)時(shí)間點(diǎn)間間距
timePointLeftCur = parseInt(iTimeSildeW / (dataLen + 1));
//計(jì)算對應(yīng)時(shí)間點(diǎn)左邊距
timePointLeft = (i + 1) * timePointLeftCur;
//時(shí)間點(diǎn)動畫形式初始化
iBase.PointSlide(timePoints[i], timePointLeft);
//初始顯示時(shí)間點(diǎn)
setTimeout(function(){
timePoints[defaultShow].onmouseover();
}, 1200);
//獲取時(shí)間點(diǎn)默認(rèn)class值,為鼠標(biāo)事件做準(zhǔn)備
timePoints[i].oldClassName = timePoints[i].className;
timePoints[i].onmouseover = function(){
that = this;//確保clearFun中的this是當(dāng)前的this
//提升用戶體驗(yàn),當(dāng)用戶無意識地劃過時(shí)不執(zhí)行函數(shù)
clearFun=setTimeout(function(){
//計(jì)算出當(dāng)前時(shí)間點(diǎn)索引值,為鼠標(biāo)劃出做準(zhǔn)備
pointIndex = iBase.Index(that, timePoints);
//去除上一個(gè)時(shí)間點(diǎn)高亮樣式
for (var m = 0; m < timePoints.length; m++) {
if (m != pointIndex) {
timePoints[m].className = timePoints[m].oldClassName
}
}
//為當(dāng)前時(shí)間點(diǎn)加載高亮樣式
iBase.AddClass(that, 'hover');
//切換日期及標(biāo)題值
date.innerHTML = '<span>' + (JSONData[pointIndex]['date'] || '') + '</span><EM></EM>';
title.innerHTML = '<a href="' + (JSONData[pointIndex]['href'] || '') + '">' + (JSONData[pointIndex]['title'] || '') + '</a>';
//改變?nèi)掌诩皹?biāo)題的位置,此處減去的數(shù)字,可根據(jù)實(shí)際樣式調(diào)整
date.style.left = ((pointIndex + 1) * timePointLeftCur - 25) + 'px';
titletop.style.left = ((pointIndex + 1) * timePointLeftCur + 6) + 'px';
//當(dāng)標(biāo)題框左邊距與標(biāo)題框?qū)挾戎痛笥谕鈬鷮挾葧r(shí),以右邊為絕對點(diǎn)
if ((title.offsetWidth + (pointIndex + 1) * timePointLeftCur) < iTimeSildeW) {
title.style.left = ((pointIndex + 1) * timePointLeftCur - timePointLeftCur) + 'px';
}else {
title.style.left = (iTimeSildeW - title.offsetWidth) + 'px';
}
//顯示日期/時(shí)間點(diǎn)/標(biāo)題
date.style.display = 'block';
titletop.style.display = 'block';
title.style.display = 'block';
},200);//200為認(rèn)定無意識劃過的時(shí)間,可自行調(diào)節(jié)
}
timePoints[i].onmouseout = function(){
//若停留時(shí)間低于200ms,認(rèn)定為無意識劃過,中止函數(shù)
clearTimeout(clearFun);
}
}
}