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

时间:2010-08-20 03:50:49

标签: jquery html css jquery-plugins

好的,抱歉尴尬的标题!

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

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

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

现在,我觉得它很酷,而不是当我的内容<div>后面传递部分平移图像时,它会跳到另一边,而不会落后于{{1} }第

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

有没有简单的方法来指定它?

谢谢!

1 个答案:

答案 0 :(得分:4)

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

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

修改

仍然认为这是实现这种效果的唯一方法。我可能会保留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运行它,它实现了或多或少的效果。背景图像的定位关闭,但我想这是因为平移功能已经开始。如果平移功能在开始移动之前自动定位背景图像,那么您想要的效果将更难实现。

你也会留下圆角背后的背景问题,虽然在顶部我认为这只是蓝色。