今日の人気記事

  1. 画像スライドショー「jCarousel」オプションたくさんアルヨ
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. テーブルにページャーを「PaginateMyTable」
  4. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  5. 左右にスクロールできるタブメニュー「ScrollTabs」

マウスオーバーで画像を拡大「ZoomPic」

スポンサーリンク

マウスオーバーで画像を拡大するプラグイン「ZoomPic」を紹介します。

jQueryプラグイン「ZoomPic」

このプラグインを使えば、小さく整形した画像の上にマウスを持っていくと……通常の画像サイズに拡大して表示させることができます。

要素を指定するだけなので、簡単に実装することができます。

スポンサーリンク

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

「ZoomPic」のデモ

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ZoomPic のデモでーす。">
<title>ZoomPic - jQuery Plugin Demo</title>
<style>
a > img {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/zoompic/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>ZoomPic のデモでーす。</h1>

<div class="images">
  <a href="#"><img src="images/01-red.png" ></a>
  <a href="#"><img src="images/02-orange.png" ></a>
  <a href="#"><img src="images/03-yellow.png" ></a>
  <a href="#"><img src="images/04-green.png" ></a>
  <a href="#"><img src="images/05-blue.png" ></a>
  <a href="#"><img src="images/06-indigo.png" ></a>
  <a href="#"><img src="images/07-purple.png" ></a>
</div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/ZoomPic.js"></script>
<script>
$(document).ready(function(){
  $(".images").ZoomPic();
});
</script>
</body>
</html>
スポンサーリンク

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