今日の人気記事

  1. 虫眼鏡のように画像の一部を拡大「Zoomple」
  2. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
  3. 編集可能なリストを作成「Editable Listview」
  4. 指定した数値から折れ線グラフを描画「SimpleChart」
  5. テキストの手動入力っぽいアニメーションを実装「TypeType」

マウスオーバーでスライドするパネル「Sliding Pop Hover」

スポンサーリンク

マウスオーバーでスライドするパネルを実装するプラグイン「Sliding Pop Hover」を紹介します。

jQueryプラグイン「Sliding Pop Hover」

このプラグインを使えば、指定した要素にマウスカーソルをもっていくとスライドしながら登場するパネルを実装することができます。

画像にパネルを重ねタイトルを表示したりする場合に便利ですね。アイデア次第ではその他にもいろいろ使えそうですね。

スポンサーリンク

それではデモページの画像にマウスオーバーしてみてください。

「Sliding Pop Hover」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Switchy のデモでーす。">
<title>Switchy - jQueryプラグイン</title>
<style>
.display-item {
  margin: 0 auto;
  width: 600px;
  height: 389px;
}
.panel {
  background-color: #ECECEC;
  padding: 50px 0;
  text-align: center;
  font-size: 50px;
}
</style>
</head>
<body>
<h1>Switchy のデモでーす。</h1>

<div class="display-item">
  <div style="display: inline-block">
    <img src="sakura.png"></img>
  </div>
  <div class="panel">
    <h2>桜!</h2>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.slidingpophover.js"></script>
<script>
$(document).ready(function(){
  $(".display-item div:first img").load(function() {
    $(".display-item").slidingPopHover({
      duration : 200
    });
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)