SlideView画像スライド(拡大・縮小)表示効果_JavaScriptスキル

実はこれ、以前書いた画像スライド表示エフェクトの改良版で、初めて注目を集めた記事です。
には次の機能があります:
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";
});


_horizo​​ntal 属性は、水平方向にスライドするかどうか、つまり右にスライドするか左にスライドするかを記録します。
寸法を計算するときに水平寸法を使用するか垂直寸法を使用するかを指定するために使用します。

下モードか右モードかを決定する _reverse 属性もあります。

コードをコピー コードは次のとおりです:

2

1

< ;div style ="right:200px;">0

ただし、これには dom 構造を変更するか、zIndex を使用してスタック順序を設定する必要があります。

コードをコピー コードは次のとおりです:

0

1

2

zIndex を設定する方法の方が優れており、プログラムでもこの方法が使用されました。
プログラムは、_reverse 属性を使用して、これらの修正を行う必要があるかどうかを判断します。

まず、_initContainer で、_reverse に従って zIndex をリセットします。

コードをコピーします コードは次のとおりです:

var zIndex = 100, gradient = this._reverse ? -1 : 1;
this._each( function(o){
var style = o.node .style;
style.position = "absolute"; style.zIndex = zIndex = gradient;


デフォルトのターゲット値を取得するときにも判断する必要があります:

getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i },
when_reverse trueの場合、固定小数点の位置がインデックスの逆方向にあるため、要素を逆方向に設定する必要があるため、maxIndexを使用して減算する必要があります。

_setMove で、インデックスに従ってスライド目標値を設定するときは、次のことも判断する必要があります:

コードをコピー コードは次のとおりです:

if ( this._reverse ) {

var get = getTarget;
index = maxIndex -
getTarget = function( o, i){ return get( o, maxIndex - i ); }
}


スライディング オブジェクト コレクションのインデックスだけでなく、表示のインデックスも変更する必要があります。オブジェクトを変更する必要があります。

[自動表示拡張]

この拡張は結合モードを使用します。原理については、ImageZoom 拡張記事の拡張モードの部分を参照してください。
違いは、拡張メソッドを追加するためにプロパティ拡張が追加されることです:


$$.extend(this,prototype);
SlideView.prototype には追加できないことに注意してください。これは SlideView の構造に影響を与えるためです。

「自動表示」は、スライドオブジェクトの自動回転表示を実現し、デフォルト状態を解除して強制表示を実装し、写真の回転表示に使用できるようにすることを目的としています。
SlideView の背後に自動表示拡張機能を追加し、auto パラメーターを true に設定している限り、有効になります。
原理も非常にシンプルです。つまり、各スライド/移動が完了したら、タイマーを使用して次のスライドを実行するだけです。

まず、「init」初期化プログラムに _NEXT プログラムを追加して、次のスライディング オブジェクトを表示します:


this._NEXT = $$F.bind( function( ){ this .show( this._index 1 ); }, this );
実際には、現在のインデックス _index に 1 を加算して、show のパラメータとして実行します。
別の _autoNext メソッドを追加します:

コードをコピーします コードは次のとおりです:

if ( !this._autoPause ) {

clearTimeout(this._autoTimer);
this._autoTimer = setTimeout( this._NEXT, this.autoDelay )


_NEXT プログラムの実行を遅らせる機能で、実行をロックする _autoPause 属性があります。

次に、実行する必要があるいくつかの場所を設定します。
まず、「終了」のスライドイベントで_autoNextメソッドを実行し、基本的な自動表示を実現します。
マウスがスライド要素に入ると、自動切り替えが停止する必要があるため、スライド要素に「Enter」が入ると、タイマーがクリアされ、_autoPause が true に設定されてロックされます。
同様に、マウスがコンテナから離れるときの「leave」イベントでは、_autoPause を false に戻してロックを解除し、_autoNext メソッドを実行して自動プログラムを再起動します。
そして、デフォルト状態への自動復元を防ぐために、「leave」で autoClose を false に設定します。

最後に、リセットを書き換える必要があります:


reset.call( this,index == unknown ? this._index :index );
this._autoNext(); 🎜>書き換えられたリセットにより、インデックスが強制的に表示され、次のスライドに対して _autoNext が実行されます。


【プロンプト情報拡張】

「プロンプト情報」エフェクトとは、各スライドオブジェクトがプロンプト情報（コンテンツ）のレイヤー（要素）に対応することを意味します。
このプロンプトメッセージは、スライドオブジェクトが表示されているときに表示され、オブジェクトを縮小して閉じると閉じられます。
ヒント拡張機能を追加し、ヒント パラメーターを true に設定している限り、有効になります。

プロンプト拡張機能は、下、上、右、左の 4 つの位置プロンプトをサポートします。
「init」で、カスタムtipModeに従って_tipPos座標スタイルを取得します:


this._tipPos = /^(bottom|top|right|left)$/.test( this. options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";

次に、スライド要素に基づいてチップ要素を取得できる関数を定義します:

コードをコピーします コードは次のとおりです:

var opt = this.options,tipTag = opt.tipTag, tipClass = opt.tipClass,
re =tipClass && new RegExp("(^|\s)"tipClass "(\s|$)"),
getTipNode = function(node){
var ノード=node.getElementsByTagName(tipTag);
if (tipClass) {
nodes = $$A.filter(nodes, function(n){ return re.test(n.className); } );
return nodes [0];
};


tipTag がカスタマイズされている場合、要素はタグに基づいて取得されます。それ以外の場合は、すべての要素がデフォルト値に従って取得されます。 *」。

tipClass がカスタマイズされている場合、要素は className に基づいてフィルタリングされます。複数のスタイルが含まれる可能性があり、直接等価にすることはできないことに注意してください。

関数を取得した後、プロンプト オブジェクトを作成します:

コードをコピーします コードは次のとおりです:

this._each( function(o) {

var node = o.node,tipNode = getTipNode(node);
node.style.overflow = "hidden";
tipNode.style.position = "絶対";tipNode.style.left = 0;

o.tip = {
"node":tipNode,
"show":tipShow != 未定義 ? tipShow : 0,
"close":tipClose != 未定義 ?tipNode[offset]
});


最初にヒント要素を取得します。関連するスタイルを設定し、スライド オブジェクトにヒント属性を追加して、対応するプロンプト オブジェクトを保存します。
「node」属性はプロンプト要素を保存し、「show」は表示時の座標値、「close」は閉じた時の座標値です。

tipShow がカスタマイズされていない場合、デフォルトの表示座標値は 0 です。つまり、プロンプト要素はスライド要素の端に接続されるだけです。
tipClose がカスタマイズされていない場合、閉じたときのデフォルトの座標値は次のとおりです。プロンプト要素のサイズ。つまり、ツールチップ要素はスライド要素のすぐ外側に隠れます。

「setMove」でプロンプトの移動目標値を設定します:

コードをコピーします コードは次のとおりです。次のように: var maxIndex = this._nodes.length - 1;

this._each( function(o, i) {

vartip = o.tip;
if ( this. _reverse ) { i = maxIndex -i; }
tip.target =index == 未定義 ||tip.close :tip.show; ;tip.change =tip.target -tip.begin;


これは、インデックス パラメータが設定されている場合よりもはるかに簡単です。はスライディング オブジェクトのインデックスと同じです。表示する必要があります。それ以外の場合は非表示になります。
スライディング オブジェクトと同様、_reverse が true の場合、インデックスを修正する必要があることに注意してください。
「tweenMove」、「targetMove」、「defaultMove」にも対応する移動関数を設定する必要があります。

スタイル設定を容易にするために、_setTipPos メソッドが拡張されました:





コードをコピー

コードは次のとおりです: var pos = this._tipPos; this._each( function(o, i) { vartip = o.tip;

tip.ノード.スタイル[ pos ] = (tip.current = Method.call(this,tip)) "px";

_tipPos 座標スタイルに従って座標値を設定します。


使用上のヒント

[表示サイズ]

表示サイズをカスタマイズするには、ピクセルまたはパーセンテージで計算できる最大値と最小値を介して設定できます。 。
設定されていない場合は要素自体のサイズに合わせて表示されます。
したがって、スライド要素によって表示されるサイズは一貫している必要はなく、プログラムが自動的に計算できます。

[アコーディオン効果]

アコーディオンは、アコーディオンに似た効果を持つ折りたたみ可能なパネル コントロールです。SlideView も設定によって同様の効果を実現できます。
まず autoClose を false に設定して自動終了をキャンセルし、次に SlideView が展開された状態で閉じないようにdefaultIndex を設定します。
通常、Accordion には固定サイズのタイトルがあり、min を使用して設定できます。
このようにして、簡単なアコーディオン効果が得られます。詳細については 3 番目の例を参照してください。


使用説明

インスタンス化するときは、パラメータとしてコンテナ オブジェクトまたは ID が必要です。


new SlideView( "idSlideView" );

オプションのパラメータは、システムのデフォルト属性を設定するために使用されます。
属性: デフォルト値//説明
ノード: null、//カスタム表示要素コレクション
モード: " left",/ /Direction
max: 0, //表示サイズ (ピクセルまたはパーセンテージ)
min: 0, //縮小サイズ (ピクセルまたはパーセンテージ)
lay: 100, //トリガー遅延
interval : 20,//スライディング間隔
duration: 20,//スライディング期間
defaultIndex: null,//デフォルトの表示インデックス
autoClose: true,//
トゥイーンを自動的に復元するかどうか: function( t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) b; },//トゥイーン演算子
onShow: function( Index) {}, //表示をスライドすると実行
onClose: function(){}//閉じるとスライドすると実行
間隔、遅延、期間、トゥイーン、autoClose、onShow、および onClose 属性は動的に設定できますプログラムの初期化後。

は次のメソッドも提供します:
show: インデックスに従って表示をスライドさせます。
close: デフォルトの状態にスライドさせます。
reset: デフォルトの状態にリセットするか、スライドするオブジェクトを展開します。インデックスに対応する;
dispose: プログラムを破棄します。

自動表示を使用するには、SlideView の後ろに自動表示拡張機能を追加し、auto パラメーターを true に設定するだけです。
次のオプション パラメータを追加します:
autoDelay: 2000//表示時間

プロンプト情報を使用するには、プロンプト情報拡張機能を追加し、tip パラメータを true に設定するだけです。
次のオプションのパラメータを追加します:
属性: デフォルト値//説明
tipPos: "bottom",//先端位置
tipTag: "*",//先端要素タグ
tipClass : "",//プロンプト要素のスタイル
tipShow: null,//表示時のターゲット座標
tipClose: null//閉じる時のターゲット座標

プログラムのソースコード

コードをコピー コードは次のとおりです:

var SlideView = function(container, options){
this._initialize(container, options );
this._initContainer();
this._initNodes();
this.reset( this.options.defaultIndex );
};
SlideView.prototype = {
//初期化手順
_initialize: function(container, options) {

varcontainer = this._container = $$(container);//コンテナ对象
this._timerDelay = null;//延伸タイマー
this._timerMove = null;//移送タイマー
this._time = 0;// 時間
this._index = 0;/ /インデックス

var opt = this._setOptions(options);

this.interval = opt.interval | 0;
この遅延 = opt.遅延 | 0;
this.duration = opt.duration | 0;
this.tween = opt.tween;
this.autoClose = !!opt.autoClose;
this.onShow = opt.onShow;
this.onClose = opt.onClose;

//設置パラメータ
var pos =this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "左";
this._horizo​​ntal = /right|left/.test( this._pos );
this._reverse = /bottom|right/.test( this._pos );

//获取滑動元素
var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $$A.filter(container.childNodes, function(n) { return n.nodeType == 1; });
//创建滑動对オブジェクト集合
this._nodes = $$A.map(nodes, function(node){
var style = node.style;
return { "node": ノード, "style": style[pos]、"position": style.position、"zIndex": style.zIndex });

//设置程序
this._MOVE = $$F.bind( this._move, this );

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.lay ) }
}, this );

$$CE.fireEvent( this, "init" );
},
//設置默认プロパティ
_setOptions: function(options) {
this.options = {//默认值
nodes: null,//自定义展示元素セット
mode: "left",//方向
max: 0,//展示尺寸(像素または百分比)
min: 0,//收缩尺寸(像素または百分比)
遅延: 100, //接触遅延時間
interval: 20,//滑動间間隔
duration: 20,//滑動持续時間
defaultIndex: null,//默认展示インデックス
autoClose: true,// 否か自動恢复
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) b; },//tween算子
onShow: function(index){},//滑動展示時間実行
onClose: function(){}//滑動关闭実行
};
return $$.extend(this.options, options || {});
},
//設置容器
_initContainer: function() {
//容器样式設置
varcontainer = this._container, style =container.style,position = $$D .getStyle( コンテナ, "位置" );
this._style = { "position": style.position, "overflow": style.overflow };//备份样式
if (position != "relative" &&position != "absolute" ) { style .position = "相対";
style.overflow = "非表示";
//移出コンテナ時
$$E.addEvent(container, "mouseleave", this._LEAVE );
//設置滑動元素
var zIndex = 100, gradient = this._reverse ? -1:1;
this._each( function(o){
var style = o.node.style;
style.position = "absolute"; style.zIndex = zIndex = gradient;
});

$$CE.fireEvent( this, "initContainer" );
},
//設置滑動オブジェクト
_initNodes: function() {
var len = this._nodes.length, maxIndex = len - 1,
type = this._horizo​​ntal ? "Width" : "Height"、offset = "offset" type、
clientSize = this._container[ "client" type ]、
defaultSize = Math.round( clientSize / len )、
//计算默认目标值的関数
getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ returndefaultSize * i; }、
max = this.options.max、min = this.options.min、getMax、getMin;
//設置パラメータ関数
if ( max > 0 || min > 0 ) {//自定パラメータ值
//小数按百分比設置
if ( max > 0 ) {
max = Math.max( max min = ( clientSize - max ) / maxIndex;
} else {
min = Math.min( min max = clientSize - maxIndex * min;
}
getMax = function(){ return max; };
getMin = function(){ return min; };
} else {//ベース元素尺寸设置パラメータ值
getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
}

//設置滑動オブジェクト
this._each( function(o, i){
//移入滑動元素時执行程序
var node = o.node, SHOW = $$F.bind( this.show, this, i );
o.SHOW = $$F.bind( function(){
clearTimeout(this._timerDelay);
this._timerDelay = setTimeout( SHOW, this.delay );
$$CE.fireEvent( this, "enter", i );, this );
$$E.addEvent(node, "mouseenter", o.SHOW );
//サイズを計算します
o.current = o.defaultTarget = getDefaultTarget(i);//デフォルトターゲット値
o.max = getMax(o); o.min = getMin(o);

$$CE.fireEvent(this, "initNodes" ); >},

//インデックスに基づくスライド表示
show: function(index) {
this._setMove(index | 0 );
this.onShow( this._index );
this._easeMove();
},
// デフォルト状態にスライドします
close: function() {
this._setMove()
this.onClose(); ;
this._easeMove();
},
// デフォルトの状態にリセットするか、対応するスライディング オブジェクトを展開します
reset: function(index) {
clearTimeout(this._timerDelay) );
if (index == 未定義 ) {
this._defaultMove();
} else {
this._setMove(index);
this._targetMove();
}
},

//スライディングパラメータを設定します
_setMove: function(index) {
var setTarget;// ターゲット値を設定しますfunction
if (index == unknown ) {//デフォルトの状態ターゲット値を設定します
getTarget = function(o){ return o.defaultTarget }
} else {//以下に従ってスライディング ターゲット値を設定しますインデックス
var ノード = this._nodes, maxIndex = nodes.length - 1;
this._index = インデックス // 表示パラメータを設定します
var nodeShow = nodes[index ], min = nodeShow.min, max = nodeShow.max; ;= インデックス ? i : min * ( i - 1 ) 最大 }; = function(o, i) { return get( o, maxIndex - i ); }
}
}
this._each( function(o, i){
o.target = getTarget( o, i);// ターゲット値を設定
o.begin = o.current;// 開始値を設定
o.change = o.target - o.begin;// 変更値を設定
} );
$$ CE.fireEvent(this, "setMove",index );
},

//スリッププログラム
_easeMove: function() {
this._time = 0; this._move ();
},
//プログラムを移動
_move: function() {
if ( this._time this._tweenMove( );
this._time ;
this._timerMove = setTimeout(this._MOVE, this.interval );
} else {//Complete
this._targetMove() ;//計算エラーを防ぐ
$$CE.fireEvent( this, "finish" )
}
},

//トゥイーン移動関数
_tweenMove: function() {
this. _setPos( function(o) {
return this.tween( this._time, o.begin, o.change, this.duration );
}); .fireEvent( this, " tweenMove" );
},
//ターゲット値移動関数
_targetMove: function() {
this._setPos( function(o) { return o.target; } );
$$CE.fireEvent( this, "targetMove" );
},
//デフォルト値移動関数
_defaultMove: function() {
this._setPos( function) (o) { return o .defaultTarget; } );
$$CE.fireEvent(this, "defaultMove" ),
//座標値を設定します
_setPos: function(method) {
clearTimeout( this._timerMove);
var pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o. current = Math.round(method.call(this, o ))) "px";
}),

//スライディング オブジェクト コレクション
_each: 関数をスキャンします。 (callback) {
$$A.forEach( this._nodes, callback, this );
},

//プログラムを破棄します
dispose: function() {
clearTimeout(this._timerDelay);
clearTimeout(this._timerMove);

$$CE.fireEvent(this, "dispose" ); 🎜>this._each( function (o) {
var style = o.node.style;
style[pos] = o.style; style.zIndex = o.zIndex; style.position = o.position ;//スタイルを復元します
$$E.removeEvent( o.node, "mouseenter", o.SHOW ); o.SHOW = o.node = null
}); RemoveEvent( this._container, " Mouseleave", this._LEAVE );

$$D.setStyle( this._container, this._style );

this._container = this._nodes = this._MOVE = this._LEAVE = null;
$$CE.clearEvent( this )
}
};



🎜>



コードをコピー


コードは次のとおりです:

SlideView.prototype._initialize = (function(){
var init = SlideView.prototype._initialize,
reset = SlideView.prototype.reset,
methods = {
" init": function(){
this.autoDelay = this.options.autoDelay | 0;

this._autoTimer = null;//定時器
this._autoPause = false;//停止自走展示
// 展示下一滑動对
this._NEXT = $$F.bind( function(){ this.show( this._index 1 ); }, this ); 🎜>"leave": function(){
this.autoClose = this._autoPause = false;
this._autoNext();
"enter": function(){
clearTimeout(this._autoTimer);
this._autoPause = true;
"finish": function(){
this._autoNext(); "dispose": function(){
clearTimeout(this._autoTimer);
}
},
プロトタイプ = {
_autoNext: function(){
if ( !this. _autoPause ) {
clearTimeout(this._autoTimer);
this._autoTimer = setTimeout(this._NEXT, this.autoDelay )
}
},
reset: function(index);
reset.call( this,index == unknown ? this._index :index );
this._autoNext()
}
};
return function(){
var options = argument[1];
if ( options && options.auto ) {
//展示オプション
$$.extend( options, {
autoDelay: 2000// 展示時間長
}, false );
//扩展プロパティ
$$.extend( this,prototype );
//扩展钩子
$$A.forEach(methods, function(method, name ){
$$CE.addEvent(this, name, method );
}, this );
}
init.apply( this, argument );
}
})();


提案情報扩展

复制代码

代码如下: SlideView.prototype._initialize = (function(){ var init = SlideView.prototype._initialize, methods = { "init": function(){

//坐标样式

this._tipPos = /^(bottom|top|right|left)$/.test(this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
"initNodes": function(){
var opt = this.options、tipTag = opt.tipTag、tipClass = opt.tipClass、
re =tipClass && new RegExp("(^|\s)"tipClass " (\s|$)"),
getTipNode = function(node){
var nodes = node.getElementsByTagName(tipTag );
if (tipClass) {
nodes = $$A.filter (nodes, function(n){ return re.test(n.className); } );
}
return nodes[0]
}; vartipShow = opt.tipShow、tipClose = opt.tipClose、
offset = /right|left/.test(this._tipPos ) "offsetWidth" : "offsetHeight";
this._each( function(o) {
var ノード = o.node、tipNode = getTipNode(node);
node.style.overflow = "hidden";
tipNode.style.position = "absolute"; tipNode.style.left = 0;
//创建提案对象
o.tip = {
"node":tipNode,
"show":tipShow != 未定義 ? tipShow : 0,
"close":tipClose != 未定義 ? tipClose : -tipNode[オフセット]
};
});
},
"setMove": function(index){
var maxIndex = this._nodes.length - 1;
this._each( function(o, i) {
vartip = o.tip;
if ( this._reverse ) { i = maxIndex -i; }
tip.target =index = = 未定義 || インデックス != i ? ヒント.ショー;
ヒント.現在の変更 = ヒント.ターゲット - ヒント.
},
"tweenMove": function(){
this._setTipPos( function(tip) {
return Math.round( this.tween( this._time,tip.begin,tip.変更、this.duration ) );
},
"targetMove": function(){
this._setTipPos( function(tip){ returntip.target; });
},
"defaultMove": function(){
this._setTipPos( function(tip){ returntip.close; });
},
"dispose": function(){
this._each( function(o){ o.tip = null; });
}
},
prototype = {
//设置坐标值関数数
_setTipPos: function(method) {
var pos = this._tipPos;
this._each( function(o, i) {
vartip = o.tip;
tip.node.style[ pos ] = (tip.current = Method.call( this,tip )) "ピクセル";
}
};
return function(){
var options = argument[1];
if ( options && options.tip == true ) {
//扩展options
$$.extend( options, {
tipPos: "bottom",// 位置を提示
tipTag : "*",// 提案元素标签
tipClass: "",// 提案元素样式
tipShow: null,// 展示時間目标坐标
tipClose: null//关闭時間目标坐标
}、 false );
//扩展プロパティ
$$.extend( this,prototype );
//扩展钩子
$$A.forEach(methods, function(method, name ){
$$CE.addEvent(this, name, method );
}, this );
}
init.apply( this, argument );
}
})();




完整实例下ダウンロード


翻訳：
http://www.cnblogs.com/cloudgamer/archive/2010/07/ 29/SlideView.html