mootools 1.3 フレームワークに基づく画像スライド効果コード

mootools 1.3 フレームワークに基づく画像スライド効果コード_Mootools

WBOY

リリース： 2016-05-16 18:07:32

オリジナル

1252 人が閲覧しました

効果のプレビューは次のとおりです。
mootools 1.3 フレームワークに基づく画像スライド効果コード_Mootools
実装原理:
コンテナは相対位置を使用し、画像は絶対位置を使用します。マウスが対応する画像に移動すると、左属性を変更して使用します。

コード分析: コードのカプセル化を実装するための picSlider クラスを作成します

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

CSS スタイル

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

#container{width:459px; height:200px; background-color:Black;position:relative;overflow:hidden;}

#container img{position :absolute; width:360px;height:300px;display:block;top :0;width:280px;height:200px;} 

JS:picSlider クラス

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

var picSlider = new Class({

実装: Options, 
options : { 
コンテナ: "コンテナ", 
imgsWidth: 0.6, 
}, 
初期化: 関数 (オプション) { 
this.setOptions(options); $(this.options.container); 
this.triggers = this.container .getElementsByTagName("img"); 
this.containerWidth = this.container.getSize().x; // コンテナの幅を取得します🎜>this.imgWidth = this.containerWidth * this.options.imgsWidth; 
 this.aveWidth = this.containerWidth / this.triggers.length; 
this.newAveWidth = (this.containerWidth - this.imgWidth) / (this.triggers.length - 1); 
this.setImgsInit(); //画像表示を初期化します 
this.start(); 
setImgsInit:function(){ 
 for(var i=0;ithis.triggers[i].setStyle("left",i*this.aveWidth) 
} 
}; 
start:function(){ 
for(var i=0; ithis.triggers[i].set("tween",{property:" left",duration:300, fps:80}); //要素ごとにアニメーションパラメータを設定 
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i])) ;//スライダー関数をバインドします
} 
}, 
slider:function(e,at){ 
e.stop(); 
for(var i=1;iif(i<=at) { 
this.triggers[i].get("tween").start(i*this.newAveWidth); 
}else{ 
this.triggers[i].get("tween").start(this.imgWidth (i-1)*this.newAveWidth); 
} 
} 
}) ; 
new picSlider(); 



ローカルで直接実行したい場合は、

このスクリプトは  にある必要があります。理由は説明されていません。