マウスオーバーでサイズが変化するパネルを実装する「Kwicks」

当ページのリンクには広告が含まれています。

jQuery Plugin » アニメーション » マウスオーバーでサイズが変化するパネルを実装する「Kwicks」

マウスオーバーでサイズが変化するパネルを実装するプラグイン「Kwicks」を紹介します。

jQueryプラグイン「Kwicks」

このプラグインを使えば、マウスオーバーでサイズが変化するパネルをアニメーション効果付きで簡単に作成することができます。

アニメーション効果もパネルサイズが横や縦に変化したり、色が変化したりなどなど、さまざまです。

デモで使用感を確認してみてください。

「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

jQueryプラグイン「Kwicks」

ソース（HTML + jQuery）

関連記事（一部広告含む）