画像切り替えプラグイン:Windy(クールで強力な推奨!)

2757 ワード

転載先http://www.sd131.com/jquery-info156
windyはjQueryプラグインで、CSS 3 D変換と変換を使用してアイテムの山を省略し、高速ナビゲーションを実現します.連続ナビゲーションの効果は、カードやフォームが早く飛ぶように注意することで、Windyと呼ばれます.このプラグインのアイデアは、CSSシェーダの例の影響を受けます.
プラグイン情報
   
現在のプラグインでは、以下のブラウザのみがサポートされています.
プレビュー図
手順の使用
このプラグインを使用するには、無秩序なリストのclassが必要です.「wi-container」< ul   id = "wi-el"   class = "wi-container" >      < li >          < img   src = "images/demo1/1.jpg"   alt = "image1" />          < h4 >Coco Loko</ h4 >          < p >Total bicycle rights in blog four loko raw denim ex</ p >      </ li >      < li <!-- ... -->   </ li >      < li <!-- ... -->   </ li >      < li <!-- ... -->   </ li >      <!-- ... -->   </ ul >
次のように呼び出すことができます.$( '#wi-el' ).windy();
以下はオプションです.// the options $.Windy.defaults = {      nextEl :  '' ,      prevEl :  '' ,      boundaries : {          rotateX : { min : 40 , max : 90 },          rotateY : { min : -15 , max : 15 },          rotateZ : { min : -10 , max : 10 },          translateX : { min : -200 , max : 200 },          translateY : { min : -400 , max : -200 },          translateZ : { min : 250 , max : 550 }      } };
これらの共通の方法は、ナビゲーション要素を接続するために使用できます.
next()
prev()
navigate(position)
ダウンロードアドレス