Yourself_jqueryによるスライディングピクチャテストをjQueryで実装した例

* {margin:0px;padding:0px; list-style-type:none;}
body{text-align:center;}
.content{width:590px;margin:0 auto;text-align:left ;}
.list{幅:565px;マージン:0px 9px;border:1px ソリッド #eee;padding:5px;display:inline-block;overflow:hidden;}
.liimg{padding:4px;border :1px ソリッド #aaa;border-radius :2px;display:inline-block;*display:inline;*margin:0px 3px;background:#FFF;width:auto;}
.imgli{margin:2px 0px; width:125px;height:300px;display:inline-block;}
.img1{background:url(images/img1.jpg) 繰り返しなし 50% 50%;}
.img2{background:url(画像/img2.jpg) 繰り返しなし 50% 50%;}
.img3{background:url(images/img3.jpg) 繰り返しなし 50% 50%;}
.img4{background:url( image/img4.jpg) no-repeat 50% 50%;}


js コード

//画像スライド効果を実現するための jquery
var zyljq = $.noConflict(); .extend({
slideW:function(wid,speed){
//widで設定する幅は最小幅または最大幅に設定可能
//設定しない場合はデフォルト設定はバインドされた要素の幅に基づいて計算されます。
//speed設定するアニメーションの実行速度は、標準、低速、高速、ミリ秒のいずれかです。
//設定されていない場合、デフォルトの速度は通常です
that = this //イベントのすべての要素をバインドします
var eleNum = zyljq(this).size(); //画像を取得します
var curwidth = zyljq(this).width();//画像の元の幅を取得します
if(!wid){
wid = Math.round(curwidth*4/5); 🎜 >//アニメーションの終了条件が設定されていない場合は、デフォルトの状況が計算されます
}
if(zyljq.trim(speed) == ""){
//速度が設定されていない場合は、デフォルトの速度
speed = "normal"
}
if(!isNaN(speed)){
// 負の値が設定されている場合は、
speed = を変更します。 Speed < 0? -speed:speed;
}
//写真の最大幅と最小幅を計算します
if(wid > curwidth){
widMin = Math.floor((eleNum) *curwidth - wid)/(eleNum-1)) "px";
widMax = ((curwidth*eleNum) - widMin*(eleNum-1)) "px"; = Math.floor((eleNum *curwidth - wid*(eleNum-1))) "px";
widMin = wid "px"
}
//console.log("widMax"; widMax ";widMin=" widMin );
//バインドホバーイベント
zyljq(this).hover(function(){
zyljq(that).stop();
zyljq(this) .animate({width: widMax},speed);
zyljq(that).not(this).animate({width:widMin},speed);
},function(){
zyljq( that).stop() ;
zyljq(that).animate({width:curwidth},speed)
}
}); >ビューは次のとおりです:
元の効果:


2 番目の要素の上にマウスを置いた後の効果:


このプロセス中に、いくつかの一般的な問題も発生しました。 IE の以前のバージョンでは、margin: 0 auto; が中央に配置されず、display: inline-block がサポートされていません。気づいていない問題も多々あるかと思いますが、もし問題があればご指導いただければ幸いです。私たちは皆、一緒に進歩することができます。