今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. スクロールしてもついてくる「Sticky」
  3. 画像に拡大・縮小ボタンを「Zoomer」
  4. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  5. バーチャルキーボードを実装「Keyboard」

マウスオーバーでスライドするパネル「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>
スポンサーリンク

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