skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

画像ギャラリーの切り替えにjQueryでインパクトを!「Blockster transition effect 」

画像ギャラリーのJavaScriptの切り替えってありきたりなものが多いですよね。
そんな時、jQueryプラグインのBlockster transition effectを使用するとインパクトのある切り替えが可能になります。

sponsors

使用方法
Blockster transition effectからファイル一式をダウンロードします。
またjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="/test/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/js/blockster.js"></script>
<script>
$(function(){
blockster({
holder: '#id名',
rows: 4, //行
cols: 6, //列
random: true, //ブロックの表示方法
animType: fade, //simple,fade
pause: 3000 //停止時間(ミリ秒)
});
});
</script>

後は下記のように画像を記載すれば完成です。
<div id="demo">
<div><amp-img src="画像パス" /></div>
</div>

また、CSSは以下のように調整してください。
#id名 { position: relative;}
#id名 div { position: absolute;}

画像ギャラリーの切り替えにjQueryでインパクトを!「Blockster transition effect 」サンプル

sponsors

「画像ギャラリーの切り替えにjQueryでインパクトを!「Blockster transition effect 」」をシェアする

記事作成:
記事URL:

TOP > > > 画像ギャラリーの切り替えにjQueryでインパクトを!「Blockster transition effect 」

前の記事:
次の記事:jQueryでウィザードを作れるプラグイン「jquery.wizard.js」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more