ホームページ >ウェブフロントエンド >jsチュートリアル >mootools 1.3 フレームワークに基づく画像スライド効果コード_Mootools
mootools 1.3 フレームワークに基づく画像スライド効果コード_Mootools
- WBOYオリジナル
- 2016-05-16 18:07:321328ブラウズ
効果のプレビューは次のとおりです。 
実装原理:
コンテナは相対位置を使用し、画像は絶対位置を使用します。マウスが対応する画像に移動すると、左属性を変更して使用します。
コード分析: コードのカプセル化を実装するための picSlider クラスを作成します
コードをコピーします コードは次のとおりです。
コードをコピー コードは次のとおりです:
#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 クラス
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();
ローカルで直接実行したい場合は、
このスクリプトは
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;i
}
};
start:function(){
for(var i=0; i
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i])) ;//スライダー関数をバインドします
}
},
slider:function(e,at){
e.stop();
for(var i=1;i
this.triggers[i].get("tween").start(i*this.newAveWidth);
}else{
this.triggers[i].get("tween").start(this.imgWidth (i-1)*this.newAveWidth);
}
}
}) ;
new picSlider();
ローカルで直接実行したい場合は、
このスクリプトは
にある必要があります。理由は説明されていません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。