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

効果のプレビューは次のとおりです。

実装原理:
コンテナは相対位置を使用し、画像は絶対位置を使用します。マウスが対応する画像に移動すると、左属性を変更して使用します。

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

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

<div id="container">
<img src="http://files.jb51.net/file_images/article/201104 /r_song1.jpg" alt="" />
<img src="http://files.jb51.net/file_images/article/201104/r_song2.jpg" alt="" />
<img src="http://files.jb51.net/file_images/article/201104/r_song3.jpg" alt="" />
<img src="http://files.jb51 .net/file_images/article/201104/r_song4.jpg" alt="" />
<img src="http://files.jb51.net/file_images/article/201104/r_song5.jpg" alt ="" />

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();



ローカルで直接実行したい場合は、
<script type="text/javascript" src="https: //ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools -yui-compressed.js"></script>
<script type="text/javascript" src="home .js"></script>このスクリプトは <div><div> にある必要があります。理由は説明されていません。