我正在开发一个图片库,其中的照片在鼠标向上滚动
和向下滚动
上滑动左
和右
分别。
包含 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 获取)
最佳答案
switchClass
在动画完成之前不会更改类,因此在半秒过去之前再次调用它会导致有趣的行为。
您应该预先选择、存储当前位置并使用动画而不是交换类;
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();
}
关于javascript - jQuery UI switchClass() 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15307134/