2012-08-14 38 views
1

我正在使用jQuery Cycle Plugin當我的幻燈片切換到下一張幻燈片時,如何創建圖像動畫

這些是插件提供的選項。 http://jquery.malsup.com/cycle/options.html

我有5個不同的幻燈片。但是每張幻燈片在幻燈片內部都有兩到三張圖片,應該在幻燈片的不同位置生成動畫,我該如何實現這一點? 或者是否有另一個jQuery插件可以讓你做到這一點?

例如, 我有一張幻燈片,有一輛車,一朵雲彩和一張太陽。所以當用戶徘徊或到達這張幻燈片。這款車將要設置動畫中心,然後在雲和太陽將動畫和車後的動畫自己定位。

enter image description here

回答

2

您需要的視差滑塊。 Here你可以看到一個例子。

+0

多數民衆贊成在很大。只有它不能在ie9 + – breezy 2012-08-14 16:32:54

-2

那麼你可以做幾件事情。你可以做到這一點,當鼠標懸停在圖像上時,它會變成一個動畫本身的gif。

.background:hover { 
background-image: url('<filepath>/animate.gif'); 
} 

或者你可以做的是單擊按鈕時,其中一個jQuery事件,或當鼠標懸停(有點麻煩,在我看來),每個元素(在上面運行單獨的圖像,可能通過ž - 指數)將動畫和滑過。

如果您使用jQuery插件,我會推薦第一個選項。

+0

GIF動畫從不是一個好的選擇。 – 2012-08-14 16:42:17

+0

有四張幻燈片和一個動畫gif在我的情況下不起作用。由於無論如何 – breezy 2012-08-14 16:45:39

1

視差可能是一個潛在的解決方案,但我會更多地看循環提供的選項。

看看這個例子:http://jquery.malsup.com/cycle/int2.html

走向之前提到的底部和幻燈片回調之後。因此,理論上講,您可以調用一個函數來將所有內容製作成動畫,然後當下一張幻燈片進入時,爲下一張幻燈片調用下一個動畫(如果有)。

如果滑塊在定時器上,這可能會很麻煩。要時刻銘記在心。

+0

這幫助@certainstrings – breezy 2012-08-17 18:05:11