ホームページ >ウェブフロントエンド >jsチュートリアル >Native Jsはデータソース(カプセル化)に応じて均等に分散された時点のスライド効果を実現_JavaScriptスキル
Native Jsはデータソース(カプセル化)に応じて均等に分散された時点のスライド効果を実現_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 18:13:031010ブラウズ
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; iif (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; mif (m ! = pointIndex) {
timePoints[m].className = timePoints[m].oldClassName
}
//現在の時点のハイライト スタイルを読み込みます
iBase.AddClass(that, 'hover')
//日付とタイトルの値を切り替えます
date.innerHTML = '' [pointIndex]['date'] || '') '< ;EM>';
title.innerHTML = '
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
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
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
timePoints[m].className = timePoints[m].oldClassName
}
//現在の時点のハイライト スタイルを読み込みます
iBase.AddClass(that, 'hover')
//日付とタイトルの値を切り替えます
date.innerHTML = '' [pointIndex]['date'] || '') '< ;EM>';
title.innerHTML = '
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。