Browsing articles in "HTML / JavaScript"
11月
17
2009

[JS]画像をスライドショーさせるスクリプト

[JS]画像やパネルをスムーズにスクロール表示する

クリック後に画像の切替やテキスト表示の切替、サイドにあるアイコンで画像をスライドさせるスクリプトについてWeb Development Blogさんで配布されていたのが気に入ったので紹介しておきたいと思います。

【js】mootoolsで出来る!ImageFlow風な画像ギャラリー (MooFlow.js)

気持ちよいスライド機能を提供する「noobSlide」

JavaScriptを使って画像の切り替え&LightBox使用

10月
27
2009

クロスフェードを実装する為のCrossfader

JavaScript Library Archive

配布元:Brand Spanking New
ライセンス:Creative Commons:Attribution Share Alike

クロスフェードとは物がゆっくりと消えていきながら別の物が現れる処理のこと。
特定の要素をフィードアウトさせながら別の要素を表示する処理になります。

設置方法

bsn.Crossfader.jsをhead要素なので読み込みます。

<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>

以下のように順番に表示したい要素に対して、それぞれidを振ります。(XHTMLの記述にはルールはありません。)

<ul><li id="pr1"><a href="#">テキストテキストテキスト</a></li><li id="pr2"><a href="#">テキストテキストテキスト</a></li><li id="pr3"><a href="#">テキストテキストテキスト</a></li><li id="pr4"><a href="#">テキストテキストテキスト</a></li><li id="pr5"><a href="#">テキストテキストテキスト</a></li></ul>

そして、その記述の後(body要素を閉じる直前などがお勧め)に以下のコードを記述します。

<script type="text/javascript"> var cf = new Crossfader( new Array('pr1' , 'pr2' , 'pr3' , 'pr4' , 'pr5'), 500, 5000 );</script>

クロスフェードしたい要素のidをnew Array内にカンマ区切りで記述してきます。

その後に今の要素から次の要素を表示する間隔(ミリ秒)とその要素を表示する間隔(ミリ秒)を記述します。間隔についてはいろいろな数字を入れながら間隔をつかんでいくと良いでしょう。

サンプル

クロスフィード用に用意した要素は、positionがabsoluteを適応されて、通常のレンダリングフローより切り取られます。

前後の要素にmarginを使う、親要素にheightを適応するなどして表示するスペースを確保する必要があります。

複数のバナーなどを配置し、ごちゃごちゃしそうなときには便利なjsライブラリですね。

10月
5
2009

Mootoolsを使ったlightboxスクリプトTOP10

Mootoolsを使ったlightboxスクリプトTOP10

Rounding Up the Top 10 Mootools Lightbox Scripts

LINE25で、Mootoolsを使ったlightboxスクリプトTOP10がまとまっています。

ざっといくつかご紹介。

Smoothbox
 画像、インナーHTML、Ajax、iframeをサポート
Multibox
 画像、インナーHTML、Ajax、iframe、Flash、動画をサポート
RoeBox
 画像をサポート
Litebox
 画像をサポート
Milkbox
 画像、Flashをサポート

年会費無料のクレジットカードなら「楽天カード」