Hatena::ブログ(Diary)

Higé au lait

 

2010年11月06日

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 をお好みのスタイルにするだけ.

2010年09月23日

jQuery プラグイン 書いた

http://gist.github.com/590362

要素を縦方向のみリサイズできるように.要素の下につかんでドラッグできる要素を追加.

http://gist.github.com/592245

テキストエリアを自動で伸ばす.動作がカクカクで気持ち悪い.


デモ