マウスオーバーでサイズが変化するパネルを実装する「Kwicks」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーでサイズが変化するパネルを実装するプラグイン「Kwicks」を紹介します。
jQueryプラグイン「Kwicks」
このプラグインを使えば、マウスオーバーでサイズが変化するパネルをアニメーション効果付きで簡単に作成することができます。
アニメーション効果もパネルサイズが横や縦に変化したり、色が変化したりなどなど、さまざまです。
スポンサーリンク
デモで使用感を確認してみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Kwicksのデモでーす。">
<link rel='stylesheet' type='text/css' href='jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 300px;
height: 300px;
}
.kwicks > li {
width: 300px;
/* height: 100px;
margin-top: 10px;*/
}
#panel-1,#panel-3 { border: solid 2px red; }
#panel-2,#panel-4 { border: solid 2px blue; }
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.kwicks.js"></script>
<script>
$(function() {
$('.kwicks').kwicks({
maxSize : 200,
spacing : 10,
behavior: 'menu',
isVertical: true
});
});
</script>
</head>
<body>
<h1>Kwicks のデモでーす。</h1>
<ul class='kwicks kwicks-vertical'>
<li id='panel-1'>ボックス</li>
<li id='panel-2'>に</li>
<li id='panel-3'>マウスオーバー</li>
<li id='panel-4'>してみてください。</li>
</ul>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Kwicks
スポンサーリンク