実はこれ、以前書いた画像スライド表示エフェクトの改良版で、初めて注目を集めた記事です。
には次の機能があります:
1、4 つの方向モードから選択できます。
2、トゥイーン アルゴリズムと組み合わせて、さまざまなスライディング効果を実現します。
3、表示を自動的に計算できます。スライド要素に基づくサイズ;
4. 表示をカスタマイズしたり、サイズを縮小したりすることもできます。
6. 自動切り替え機能を拡張できます。
互換性: ie6/7/8、firefox 3.6.8、opera 10.51、safari 4.0.5、chrome 5.0
プログラムの説明
[基本原則]
スライド要素の位置座標(左/右/上/下)を設定することで、マウス入力した対象要素をスライド表示し、他の要素をスライド、縮小することができます。
難しいのは、複数のスライド要素を同時に異なるスライドを実行するように制御する方法です。ここで重要なのは、全体のスライドを個別のスライド要素に分解することです。
各スライド要素に目標値を設定し、それぞれの目標値に向かってスライドさせていき、全ての要素が目標値に到達したら完了です。
[コンテナの設定]
コンテナは後のスライディングパラメータの計算で使用するため、最初にコンテナを設定する必要があります。
最初にコンテナのスタイルを設定します。スライドを実現するには、コンテナの相対位置または絶対位置を設定し、コンテナのサイズを固定するためにオーバーフローを「非表示」に設定する必要があります。
マウスがコンテナの外に移動すると、_LEAVE 削除関数がトリガーされます。
$$E.addEvent(container, "mouseleave", this._LEAVE ); >_LEAVE 関数は次のようになります:
コード
var CLOSE = $$F.bind( this.close, this );
this._LEAVE = $$F.bind( function( ){
clearTimeout(this._timerDelay);
$$CE.fireEvent( this, "leave" );
if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ) ; }
}, this );
autoClose 属性が true の場合、close メソッドは遅延してトリガーされます。
[スライディングオブジェクト]
プログラムの初期化時に、スライディング要素に基づいてスライディングオブジェクトコレクションが作成されます。
最初にスライド要素を取得します:
var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $ $ A.filter(container.childNodes, function(n) { return n.nodeType == 1; });
カスタム ノードのスライディング要素がない場合は、スライディング要素としてコンテナから childNodes を取得します。
IE 以外のブラウザでは childNodes の一部としてスペースが使用されるため、フィルタリングには nodeType も使用します。
次に、取得したスライディング要素を使用して、プログラムに必要な _nodes スライディング オブジェクト コレクションを生成します。
this._nodes = $$A.map(nodes, function(node){ return { " node" : node }; });
スライディングオブジェクトは、「node」属性を使用してスライディング要素を記録します。
次に、_initNodes メソッドでスライディング オブジェクトを初期化します。
各スライディング オブジェクトには、スライディング ターゲット値の計算に使用される 3 つの属性があります。defaultTarget デフォルト ターゲット値、最大表示サイズ、最小縮小サイズです。
カスタムの最大サイズまたは最小サイズがある場合、カスタム サイズに基づいて計算されます。
プログラムは max に基づいた計算を優先します:
max = Math.max( max min = (clientSize - max) / maxIndex;
ここで、clientSize はコンテナの表示領域サイズ、defaultSize は平均割り当てサイズです。
max が 10 進数または 1 の場合は、パーセントとして計算し、サイズをdefaultSize から clientSize までの範囲に制限します。
次に、最大値を引いた後、他の縮小要素の平均サイズを計算すると、最小値が得られます。
カスタム最大値がない場合は、カスタム最小値に従って計算します:
min = Math.min( min max = clientSize - maxIndex * min; 同様に、min が 10 進数の場合は、範囲を制限してから max を計算します。
最後にカスタム サイズ計算関数を取得します:
getMax = function(){ return max; }; >
カスタマイズされた最大値または最小値がない場合は、要素サイズに基づいて計算されます:
getMax = function(o){ return Math.max( Math.min( o.node[ offset ] , clientSize ) , defaultSize ) };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex };
表示サイズとして要素サイズを計算し、範囲を制限します。次に、収縮サイズを計算します。
サイズ計算関数を取得した後、_each メソッドを使用してスライディング オブジェクトをトラバースして設定します。
o.current = o.defaultTarget = getDefaultTarget(i);
o .max = getMax(o); o.min = getMin(o);
ここで、current は、移動の計算中に開始値として使用される現在の座標値です。
defaultTargetは、defaultSizeとindexに基づいて得られるデフォルトの目標値、つまりデフォルト状態での移動の目標値です。
また、マウスがスライド要素に入ったときに表示関数がトリガーされるように設定します:
Code
var node = o.node, SHOW = $$F.bind ( this.show, this, i );
o.SHOW = $$F.bind( function(){
clearTimeout(this._timerDelay);
this._timerDelay = setTimeout( SHOW, this.遅延 );
$$CE.fireEvent( this, "enter", i );
$$E.addEvent( ノード, "mouseenter", o.SHOW ); 🎜>スライディング要素の「mouseenter」イベントでトリガーし、現在のスライディング オブジェクトのインデックスと遅延設定を渡します。
[スライド表示]
マウスがいずれかのスライド要素に入ると、show メソッドがトリガーされて表示が開始されます。
まず、_setMove メソッドを実行してスライディング パラメーターを設定し、パラメーターとしてインデックスを使用します。
_setMoveでは主に移動値を計算する際に必要な目標値、開始値、変更値を設定します。
まずインデックスを修正すると、間違ったインデックス値が 0 に設定されます。
次に、インデックスに従って表示されるスライディング オブジェクトを取得し、表示されたオブジェクトの最小値と最大値から getTarget ターゲット値関数を取得します:
var nodeShow = nodes[index], min = nodeShow.min, max = nodeShow .max;
getTarget = function(o, i){ return i それ以外の場合、ターゲット値は min * ( i - 1 ) max であり、実際には表示オブジェクトの位置を max に変更することを意味します。
次に、各スライディング オブジェクトのパラメータ属性を設定します。
this._each( function(o, i){
o.target = getTarget(o, i);
o.begin = o.current;
o.change = o.target - o.begin;
ここで、target はターゲット値を記録し、begin は開始値とターゲットを取得します。電流通過値 開始値との差が変化値となります。
設定が完了したら、_easeMove メソッドを実行してスライドを開始し、_time 属性を 0 にリセットしてから、_move プログラムを実行して正式に移動を開始します。
まず、_time が継続時間に達したかどうかを判断します。到達していない場合は、移動を続けます。
プログラムは、イージングを設定するための _tweenMove 移動関数をセットアップします。
this._setPos( function(o) {
return this.tween( this._time, o. begin, o .change, this.duration );
});
現在時刻、開始値、変更値、継続時間を組み合わせてトゥイーン アルゴリズムを使用すると、移動する現在の座標値を取得できます。
ps: トゥイーン イージングについては、トゥイーン アルゴリズムとイージング効果を参照してください。
_time が継続時間に達すると、スライディングが完了したことを意味します。
this._setPos( function(o) { return o. target; } );
ターゲット値に直接移動すると、不正確なシフトが発生する可能性を防ぐことができます。
[閉じてリセット]
close メソッドは表示を閉じることができます。つまり、デフォルトの状態にスライドさせます。これはコンテナーが移動されたときに実行されます。
デフォルト状態とは、すべてのスライディング要素がデフォルトのターゲット値であるdefaultTargetに配置されている状態を指します。
最初に _setMove を使用して移動パラメータを設定します。_setMove にインデックス パラメータがない場合、ターゲット値はデフォルトのターゲット値に設定されます:
getTarget = function(o){ return o。 defaultTarget; }
パラメータの設定が完了したら、スライド表示と同様に _easeMove を実行します。
リセットメソッドは、表示をリセットすることができます。リセットとは、スライドせずに直接目標値に移動することを意味します。
インデックスパラメータがない場合、_defaultMove デフォルト値移動関数が直接実行されます:
this._setPos( function(o) { return o.defaultTarget; }
要素を直接スライドすると、デフォルトの状態に移動します。
インデックスパラメータがある場合は、まず _setMove を使用してインデックスに従ってターゲット値を設定し、次に _targetMove を実行してターゲット値に直接移動します。
プログラムが初期化された後、リセットが実行され、カスタムのdefaultIndexがパラメータとして使用されます。
defaultIndexを使用すると、インデックスに対応するスライドオブジェクトを最初から表示します。
[方向モード]
プログラムは、下、上、右、左 (デフォルト) の 4 つの方向モードをカスタマイズできます。
左右は横方向、下と上は縦方向にスライドします。
右と左の違いは、固定点の方向が異なることです。左は左を固定点として右にスライドしますが、右はその逆です。
下と上の違いも同様ですので、具体的な例を参考にすると理解できると思います。
プログラムは、対応する方向の座標スタイルを異なる方向に変更することで実装されます。
たとえば、左モードでは「左」スタイルを使用して動きのエフェクトを作成し、上モードでは「上」スタイルを使用します。
初期化プログラムで設定された _pos 属性は、現在のモードで使用される座標スタイルを記録するために使用されます:
this._pos = /^(bottom|top|right|left) $/ .test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";
次に、_setPos メソッドの _pos で指定された座標スタイルを使用して、座標値を設定します。 pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o.current = Math.round(method.call( this, o )) ) " px";
});
_horizontal 属性は、水平方向にスライドするかどうか、つまり右にスライドするか左にスライドするかを記録します。
寸法を計算するときに水平寸法を使用するか垂直寸法を使用するかを指定するために使用します。
下モードか右モードかを決定する _reverse 属性もあります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
