マウスオーバーしたときに画像をぶるぶる震わせる、など訪問者を驚かせて楽しませることができるプラグインです。
今回使用したのは、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プラグイン)』さんです。
ありがとうございます。
