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

Question

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

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

所以基本上，使用 jQuery 插件 Spritely，可以调用 .pan() 方法/ Action ，它允许您(不言自明)在屏幕上平移一些东西。

目前，我的页面背景中有三个视频游戏场景，从左向右平移，反之亦然。

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

我还希望 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 中运行它，它或多或少地达到了效果。背景图像的定位已关闭，但我想那是因为平移功能已经启动。如果平移功能在开始移动背景图像之前自动定位背景图像，那么您想要的效果将更难实现。

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