skuare.net

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

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」

画像の切り替えに飽きてきた方には今回紹介するjq-tilesは良いかもしれません。
画像をタイル状に多彩なエフェクトで切り替えてくれ、インパクトがが出てきます。

sponsors

使用方法 jq-tilesからファイル一式をダウンロードします。
<link rel="stylesheet" href="jquery.tiles.css" />
<style>
.slider { width: 400px; height: 320px; } //切り替え要素の大きさ
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tiles.min.js"></script>
<script type="text/javascript">
$(function(){
$('.class名').tilesSlider({
x: 6, y: 6, // x,yの個数 maxは20
effect: 'default',
fade: true, // タイルのエフェクトをフェードさせるか
random: false, // 順番をランダムに
loop: true, //ループ
auto: true, //自動
slideSpeed: 3000, // スライド間の速度
tileSpeed: 1000, // すべてのタイルがなくなる速度
cssSpeed: 300 //cssの早さ
});
});
</script>
あとは上記で振ったclass名を表示させたい場所に記述すれば完成です。
<div class="slider">
<amp-img src="画像パス1"/>
<amp-img src="画像パス2"/>
<amp-img src="画像パス3"/>
</div>

なお、effectには下記のようなものがあります。
default、simple、left、up、leftright、updown、switchlr、switchud、fliplr、flipud、reduce、360

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」サンプル

sponsors

「エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」」をシェアする

記事作成:
記事URL:

TOP > > > エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」

前の記事:
次の記事:[クーポンあり]PowerPointでのワイヤーフレーム!「PowerMockup」アップデート

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

jQuery プラグインまとめ!

JavaScript

read more

Column

read more