jQuery と CSS3 の :target セレクタを使ってスライドショーを作ってみた
:target セレクタの便利さを試してみたかったので作ってみた.
デモ: jQuery Slideshow with CSS3 :target selector
上下キーでページ切り替え.単純なページ切り替えしか実装していない.文字が追加で表示されるとか横から何か飛び出てくるとかはできない.
JavaScript 側ではフラグメント識別子を変更しているだけという手抜き仕様.
スライドショーといえば Opera Show が手軽なんだけど,Opera 以外じゃ動かないからね.
使い方
HTML
<div> <p>page 1</p> </div> <div> <p>page 2</p> </div> <script type="text/javascript"> $("div").slideShow(); //それぞれの div を 1 スライドに <script>
指定した要素に "slide" というクラスをつけている.
CSS
/* html と body を height: 100% にしているのは .slide の height を 100% にするため*/ html { height: 100%; } body { height: 100%; } .slide { height: 100%; display:none; } .slide:target { display:block; }
あとは .slide をお好みのスタイルにするだけ.