我正在开发一个图片库,其中的照片分别在鼠标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 获得)