超酷的結合CSS3轉場jQuery plugin

最近找到一個很酷的2D/3D相片CSS3轉場的jQuery plugin，使用後在網站放相片輪播就更炫了。

外掛網址
Flux-Slider

首先簡單的準備這樣的html
<div id="slider">
<img src="imgs/peacock.jpg" alt="" />
<img src="imgs/koi.jpg" alt="" />
<img src="imgs/life.jpg" alt="" />
</div>

然後像這樣初始化

view plaincopy to clipboardprint?

1. if(!flux.browser.supportsTransitions)   
2. alert("Flux Slider requires a browser that supports CSS3 transitions");   
3.   
4. window.f = new flux.slider('#slider', {   
5.     pagination: false,   
6.     controls: false,   
7.     transitions: ['explode', 'tiles3d', 'bars3d', 'cube', 'turn'],   
8.     autoplay: false  
9. });  

文件有介紹每個初始化的部分代表什麼，transitions的選項裡面有這個外掛有的轉場效果，可以選幾個喜歡的效果來用。

如果要用按鈕控制切換照片的話，可以參考以下的寫法。

view plaincopy to clipboardprint?

1. $('.transitions').click(function(event){   
2.     event.preventDefault();   
3.     window.f.next($(event.target).data('transition'), $(event.target).data('params'));   
4. });  

這個很實用，分享給大家。

DEMO