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

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

jQuery Plugin » 画像 » マウスオーバーで画像を拡大「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>

ZoomPic

jQueryプラグイン「ZoomPic」

ソース（ HTML + jQuery ）

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