[JS]パネルをペロッとひっくり返すスクリプト -QuickFlip 2
Post on:2009年7月23日
sponsors
divで実装した2枚のパネルを使用して、裏表にペロッとひっくり返すスクリプトをJon Raaschから紹介します。
実装は簡単で、2枚のパネルをdivで括り、親のdivとアンカー箇所にclassを指定します。
HTML
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="quickFlip"> <div>表のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> <div>裏のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> </div> </textarea> |
あとはスクリプトを外部ファイルとして記述し、下記のスクリプトを記述します。
JavaScript
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $(function() { $('.quickFlip').quickFlip(); }); </textarea> |
QuickFlip 2はjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
