マウスオーバーで画像を拡大「ZoomPic」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーで画像を拡大するプラグイン「ZoomPic」を紹介します。
jQueryプラグイン「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>
スポンサーリンク