要素を色んな風にスライドさせるJavaScript「qBox plugin」

要素を整然と並べるとちょっと面白みがなくなりますよね。
そんな時jQueryプラグインのQBox pluginを使用するとユーザーの目線をひきつけられるでしょう。
要素を色んな風にスライドさせるJavaScript「qBox plugin」サンプル

使用方法
QBox pluginからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="qbox.js"></script>
<script type="text/javascript" src="qtime.js"></script>
<script>
$(function(){
$('#id名').qbox();
});
</script>

上記のようにjsを記述したら、htmlを書いていきます。
<div id="id名">
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
<!-- 以下要素分 -->
</ul>
</div>

また適宜CSSで調整します。
以下は一例です。
#id名 {
width: 340px;
height: 340px;
position: relative;
overflow: hidden;
}
#id名 li {
width: 78px;
height: 78px;
margin: 10px;
border-style: solid;
border-width: 8px;
list-style:none;
}

追加でオプション設定も可能で、以下のようなものがあります。
$(function(){
$('#box').qbox({
slide: {
effect: 'linear', //エフェクト指定
duration: 500, //動作間隔
from: 'all', // スライド位置(all, top, right, bottom or left)
by: 'random' // スライド順序(random, asc or desc)
},
box: {
selector: 'li', // 要素指定
rows: 3, // 列数
cols: 3 // 行数
},
qtime: {
interval: 2, // スライド前の秒数
step: 1000 // スライド時間
}
});
});

要素を色んな風にスライドさせるJavaScript「qBox plugin」サンプル

sponsors

「要素を色んな風にスライドさせるJavaScript「qBox plugin」」をシェアする

記事作成:
記事URL:

TOP > > > 要素を色んな風にスライドさせるJavaScript「qBox plugin」

前の記事:
次の記事:Facebookのファンページ21

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

jQuery プラグインまとめ!