使用jQuery spritely插件的.pan()跳过定义的空间

Question

好的,抱歉尴尬的标题!

在我看来,这是一种独特的情况.

所以基本上,使用jQuery插件Spritely,可以调用一个.pan()方法/动作,它允许你(真正自我解释)在屏幕上平移一些东西.

我目前有三个视频游戏场景从左到右平移,反之亦然在我的页面背景中,在我的内容后面.

现在,我认为它很酷,而不是当我的内容<div>s 后面传递部分平移图像时,它会跳到另一边,而不会落后于<div>s.

我也希望sprite能够从左侧移动到右侧,所以如果它不是插件的两个独立实例会更好.我对任何建议都持开放态度!

有没有简单的方法来指定这个？

谢谢!

Answer 1

因为您正在移动图像，所以我怀疑除了使用插件的两个实例之外还有其他简单的方法可以做到这一点。两者的移动方式相同，但一个在内容的左侧，一个在右侧，并且定时，以便看起来只是一个卷轴。

由于性能问题，您可能不想这样做，但只要您保持插件的其余部分简单并很好地优化您的图像，我认为您应该没问题。

编辑

仍然认为这是达到效果的唯一方法。我可能会保留 html，因为所有背景图像都作为单个实体，但我会使用 js 来克隆它们、定位它们并移动它们。例子：

var windowSize = $(document).width();
var elementSize = (windowSize - $('#header').width())/2;

$('#bg_1').addClass('bg_1').css('background-position','right top').width(elementSize+'px').clone().css({'left':'auto','right':'0','background-position':'left top'}).insertAfter('#bg_1');

$('.bg_1').each(function(){$(this).pan({fps: 3, speed: 2, dir: 'right'})});

当然，这需要一些工作，但我尝试在您网站上的 firebug 中运行它，它或多或少达到了效果。背景图像的定位已关闭，但我想这是因为平移功能已启动。如果平移功能在开始移动背景图像之前自动定位背景图像，那么您想要的效果将更难实现。

您还会遇到圆角后面的背景问题，尽管在顶部我认为无论如何这都是蓝色的。