使用jQuery Spritely插件的.pan()在指定区域内进行跳跃。

Question

好的，抱歉标题有点尴尬！

在我看来，这是一种独特的情况。

基本上，使用jQuery插件Spritely，可以调用.pan()方法/操作，使您可以（显而易见地）将某些东西横跨屏幕滑动。

我目前在页面背景中有三个视频游戏场景从左到右和从右到左移动。

现在，我想如果横向移动图像的一部分经过我的内容

时，它会跳到另一侧，而不是在

后面。

我也希望精灵能够从左边到右边，因此如果不是插件的两个单独实例，则会更好。 我接受任何建议！

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

谢谢！

- Qcom

---

下面更新了我的答案，并附上了一些示例代码。 - Stuart Burrows

考虑将您的代码转换为HTML5，您可以使用画布实现一些很酷的功能。 - Incognito

@Inrbob，让我来看看。 @user257493，我喜欢那个想法，你建议它替换还是修改某些部分？如果修改，哪些部分？ - Qcom

HTML5和CSS3会使这更容易，但请注意，两者都没有得到很好的支持，特别是在IE浏览器中。您需要集成JavaScript以添加对所有现有代码的支持。无论哪种方式，都可能需要大量工作，因此在加倍工作量之前，请决定要采取哪种路线。最后，您是否调查了其他插件？ - Stuart Burrows

是的，唯一考虑过的其他插件是GameQuery，因为我真的很想让它变得互动。然而，这需要大量的工作，特别是在背景问题上。我想现在，我要么放弃它，要么按照你在答案中建议的路线去做。 - Qcom

@user257493：仅仅说应该使用HTML5是一个毫无用处的建议，因为原始帖子中没有描述平台限制。HTML5很好，但它不是解决所有浏览器/图形问题的方案。 - Aaron

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运行它，效果基本实现了。背景图片的定位有些偏差，但我想这是因为平移功能已经启动了。如果平移功能在开始移动背景图像之前自动定位背景图像，则您想要的效果将更难实现。

您还需要解决圆角后面的背景问题，虽然在顶部我认为这只是蓝色的问题。

- Stuart Burrows

---

我喜欢你的想法。目前我会保持这个状态。你应该现在去看一下，它看起来非常酷：www.marioplanet.com。尽管我可能坚持使用一个实例，但我将保持问题开放，以便了解如何在没有两个实例的情况下完成此操作。 - Qcom