マウスオーバーしたときに画像をぶるぶる震わせる、など訪問者を驚かせて楽しませることができるプラグインです。
今回使用したのは、jQueryプラグインjRumbleです。
↓以下が実際のソースサンプルです。
▼JavaScript
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script> <script src="./js/jquery.jrumble.1.3.min.js"></script> <script type="text/javascript"> $(function() { $('#volcano').jrumble({ x: 2, y: 2, rotation: 1 }); $('#volcano').hover(function(){ $(this).trigger('startRumble'); }, function(){ $(this).trigger('stopRumble'); }); }); </script>
▼CSS
<style type="text/css"> * { margin: 0; padding: 0; } body{ text-align:center; margin-top:20px; } p{ margin-bottom:10px; } </style>
▼HTML
<p>マウスオーバーでぶるぶる震えます</p> <img id="volcano" src="images/01.jpg" width="200" height="200" />
今回、参考にさせていただいたのは、
『ぶるぶる震えるjQueryプラグインを紹介します(jrumbleプラグイン)』さんです。
ありがとうございます。