読者です 読者をやめる 読者になる 読者になる

実験 画像のポップアップ

マウスを画像の上に持っていくと画像がちょっと持ち上がって、画像の上からポインターが離れるともとに戻るスクリプトです。
http://niming538.hatenablog.com/entry/2014/03/06/165003

<h1>PopUp Image</h1>
<div class="waku">
<img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164254.png" alt="" width="30%" />
<img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164436.png" alt="" width="30%" />
<img class="popimg" src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/niming538/20140306/20140306164132.png" alt="" width="30%" />
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(".popimg").hover(function() {
    $(this).css("margin-top", "10px").css("margin-bottom", "30px");
}, function() {
	$(this).css("margin-top", "20px").css("margin-bottom", "20px");
});
// ]]></script>

これだけのスクリプトでこんなことができてしまうなんて、まるで手品のようです。