Native Jsはデータソース(カプセル化)に応じて均等に分散された時点のスライド効果を実現_JavaScriptスキル

Chrom、Firefox、Opera、Safari などの標準ブラウザで表示することをお勧めします。つまり、

にはソース データに基づいて項目の総数が実装されており、影や丸い角はありません。例では、JSON データ グループ）、両方のタイムライン上にマウスが通過すると、マウス通過イベントが右方向に滑らかなアニメーションで表示されます。ユーザーが (意図せずに) タイムポイントを超えると、対応するイベントはトリガーされません。関連するメソッドの説明と使用法については、以下のメモを参照するか、コメントを残してください。バグを見つけて送信することも歓迎します。


Js コア コードここをクリックしてくださいサンプルを表示

コードをコピーしてください。 > コードは次のとおりです:

var JSONData=[{...},{...},...];//データ ソース、すべてが生まれ、それによって消滅します

function iTimePoint(iTimeSlideId 、dateId、timeLineId、titleTop、titleId、defaultShow){
/* 受信パラメータの説明:
* iTimeSlideId: このサンプル DOM では #itimeslide; dateId: 日付 ID 名。サンプル DOM #date;
* timeLineId: このサンプル DOM では #timeline;
* titleTop: このサンプル DOM では #titletop; 🎜>* titleId: タイトル コンテナ ID 名。このサンプル DOM #title;
* defaultShow: 初期表示時点を設定します。デフォルトは 0 で、値は渡せません。
*/

//テスト用のパラメーター判定は、操作が成功した後に削除できます
if (arguments.length 6) {
alert('パラメーター入力エラーです。Enter 5 を渡してください。または6 つの値! :)');
return
}

//一般メソッド
var iBase = {
//document.getElementById
Id: function( name){
return document.getElementById(name);
},
//時点のアニメーション表示
PointSlide: function(elem, val){
//スライド速度を制御可能i =5
for (var i = 0; i (function(){
//この pos 定義は非常に重要です。クロージャーを使用して直接取得したものは上記の i
var pos = i
//スムーズな動き
setTimeout(function(){
elem.style.left = pos * val / 100; 'px';
}, (pos 1) * 10);
})();
}
},
//要素にスタイルを追加します
AddClass: function ( elem, val){
//要素にクラスがない場合は、直接割り当てます
if (!elem.className) {
elem.className = val
}else {
/ /そうでない場合は、スペースを追加して新しいクラスを追加します。
var oVal = elem.className;
oVal = val; },
//要素インデックスを取得
Index: function(cur, obj){
for (var i = 0; i if (obj[i ] = = cur) {
return i;
}
}
}
}
//関数変数定義領域全体
var dataLen = JSONData.length; 🎜>var iTimeSilde = iBase.Id(iTimeSlideId);
var date = iBase.Id(dateId);
var timeLine = iBase.Id(timeLineId); ;
var title = iBase.Id(titleId);
var iTimeSildeW = iTimeSilde.offsetWidth;//スライド領域の実際の幅
var timePoint = document.createElement('ul');// store time Points ul
var timePointLeft = null;//親要素の左側を基準とした時点の距離
var timePointLeftCur = null;//各 2 つの時点間の距離
var pointIndex = 0;//時点のポイントはキューにあります インデックス値
vardefaultShow =defaultShow || 0;//デフォルトの表示時間
var clearFun=null;//ユーザーが無意識にスワイプした場合に実行を中止します
var that=null;
/ /データ項目の数に基づいて対応する時点の HTML を生成します
for (var i = 0; i timePoint.innerHTML = '< ;li>';
}
//タイムラインにタイムポイントを挿入します DIV
timeLine.appendChild(timePoint)
var timePoints = timeLine.getElementsByTagName('li');
//タイムポイントのスムーズな表示
for (var i = 0; i //各 2 つのタイムポイント間の距離
timePointLeftCur = parseInt(iTimeSildeW) / (dataLen 1));
/ /対応する時点の左マージンを計算します
timePointLeft = (i 1) * timePointLeftCur
//時点のアニメーション フォームの初期化
iBase.PointSlide (timePoints[i], timePointLeft);
//初期化 時間ポイントを表示します
setTimeout(function(){
timePoints[defaultShow].onmouseover();
},
//タイムポイントのデフォルトのクラス値を取得し、マウスイベントを準備します
timePoints[i].oldClassName = timePoints[i].className
timePoints[i].onmouseover = function(){
that; = this;//clearFun の this が現在の this であることを確認します
//ユーザー エクスペリエンスを向上させ、ユーザーが無意識にスワイプしたときに関数を実行しないようにします
clearFun=setTimeout(function(){
//Calculateマウスのスワイプを準備する現在の時点のインデックス値
pointIndex = iBase.Index(that, timePoints)
//前の時点のハイライト スタイルを削除します
for (var m = 0; m if (m ! = pointIndex) {
timePoints[m].className = timePoints[m].oldClassName
}
//現在の時点のハイライト スタイルを読み込みます
iBase.AddClass(that, 'hover')
//日付とタイトルの値を切り替えます
date.innerHTML = '' [pointIndex]['date'] || '') '< ;EM>';
title.innerHTML = '