Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2010年11月23日

2010年11月17日

g1983ers 忘年会

1983忘年会!2010 : ATND


higeorange: photo by june29

昨年の私.風邪引いてた.[june29 撮影]


今年も忘れますよ.皆様の参加お待ちしております.

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

 |