2

私は、写真をスライドさせたり、マウスに置いたりする画像ギャラリーを開発しleftてrightいscroll upますscroll down。

5枚の写真があるギャラリーは次のようになります。

http://www.games07.tk/Untitled.png

働き：

function scrollPhotosLeft()
{
       $(".photo0").switchClass("photo0","photo1",500);
       $(".photo1").switchClass("photo1","photo2",500);
       $(".photo2").switchClass("photo2","photo4",500);
       $(".photo3").switchClass("photo3","photo0",500);
       $(".photo4").switchClass("photo4","photo3",500);
}
function scrollPhotosRight()
{
        $(".photo0").switchClass("photo0","photo3",500);
        $(".photo1").switchClass("photo1","photo0",500);
        $(".photo2").switchClass("photo2","photo1",500);
        $(".photo3").switchClass("photo3","photo4",500);
        $(".photo4").switchClass("photo4","photo2",500);
}

CSS：

.photo0{
   top: 50%;
   left: 50%;
}
.photo1{
   top: 40%;
   left: 30%;
}
.photo2{
   top: 30%;
   left: 10%;
}
.photo3{
   top: 40%;
   left: 70%;
}
.photo4{
   top: 30%;
   left:90%;
}

下にスクロールしても問題はありませんが、状況によっては、下にスクロールして突然上にスクロールすると、写真が次のようになります。

http://www.games07.tk/Untitled2.png

この問題を克服する方法や、これを実装する他の方法はありますか？

上下にスクロールする組み合わせの後で、switchClass（）が画像に同じクラスを与えることに気づきました（これはGoogle Chrome Inspect Elementから取得しました）

4

1 に答える 1

2

switchClassアニメーションが終了するまでクラスは変更されないため、0.5秒が経過する前にクラスを再度呼び出すと、おかしな動作が発生します。

クラスを交換する代わりに、事前に選択して現在の位置を保存し、アニメーションを使用する必要があります。

var p0 = $(".photo0");
var p1 = $(".photo1");
// etc
var i = 0;
var posn = [
    {x:50,y:50},
    {x:100,y:70},
    {x:150,y:80},
    {x:200,y:70},
    {x:250,y:50}
];
function movePhotos(){
    p0.animate( posn[i], 500 );
    p1.animate( posn[(i+1)%5], 500 );
    // etc
}
function scrollPhotosLeft(){
    i = (i + 1) % 5;
    movePhotos();
}
function scrollPhotosRight(){
    i = (i + 5 - 1) % 5;
    movePhotos();
}
于 2013-03-09T04:47:58.627 に答える