使用jQuery spritely插件的.pan（）在定義的空間之間跳過

好的，對於尷尬的標題感到抱歉！使用jQuery spritely插件的.pan（）在定義的空間之間跳過

在我看來這是一種獨特的情況。因此，基本上，使用jQuery插件Spritely，可以調用.pan（）方法/動作，它允許您（不言自明地）在屏幕上平移某些東西。

我目前有三個視頻遊戲場景從左到右平移，反之亦然，在我的頁面背景中，在我的內容後面。

現在，我認爲它會很酷，而不是當部分的平移圖像通過我的內容<div> s時，它會跳到另一邊，而不會落在<div>之後。

我也希望精靈能夠從左側走到右側，所以如果它不是兩個單獨的插件實例會更好。我願意接受任何建議！

有沒有簡單的方法來指定它？

謝謝！

來源

2010-08-20 Qcom

更新了我的答案，下面有一些示例代碼 – lnrbob 2010-08-24 07:09:53

考慮將代碼切換到html5，您可以使用該畫布做一些很酷的事情。 – Incognito 2010-08-24 14:00:00

@Inrbob，讓我看看。 @ user257493我喜歡這個想法，你是否建議它替換或修改某些部分，如果修改，哪些？ – Qcom 2010-08-24 14:39:28

因爲你正在移動圖像我懷疑有一個簡單的方法來做到這一點，而不是使用插件的兩個實例。兩者的移動方式相同，但內容左側一個，右側一個，並定時顯示爲只有一個卷軸。

你可能不想這樣做是因爲性能問題，但只要你保持插件的其餘部分簡單並優化你的圖片，我認爲你應該沒問題。

編輯

仍然認爲這是實現效果的唯一途徑。我可能會保留所有的背景圖像作爲單個實體的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運行這一點，它達到的效果更多或更少。背景圖像的位置是關閉的，但我想這是因爲泛功能已經開始。如果平移功能在開始移動它們之前自動定位背景圖像，那麼您想要的效果將更難實現。

你也會留下圓角後面的背景問題，儘管在頂部我認爲這只是藍色而已。

來源

2010-08-22 15:58:23 lnrbob

我喜歡你來自哪裏。這就是我現在要保留的內容。你應該現在看看它，它看起來很酷：www.marioplanet.com 我會留下問題，看看我是否可以找出如何做到這一點沒有兩個實例，即使我可能會堅持只有一個。 – Qcom 2010-08-22 22:23:55

使用jQuery spritely插件的.pan（）在定義的空間之間跳過

回答

相關問題