JQuery 滑鼠移過放大圖片 - hoverpulse

來源：http://malsup.com/jquery/hoverpulse/

by Shang-De You

HTML

<script src="http://malsup.com/jquery/hoverpulse/jquery.hoverpulse.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.com/jquery/hoverpulse/jquery.hoverpulse.js"></script>

<div id="thumbs">
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach1.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach2.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach3.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach4.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach5.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach6.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach7.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach8.jpg" width="64" height="64" /></div>
            <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach9.jpg" width="64" height="64" /></div>
        </div>

CSS

#thumbs {
    position: relative;
    width: 198px;
    height: 198px;
}
div.thumb {
    float: left;
    padding: 1px;
    width: 64px;
    height: 64px;
}
div.thumb img {
    border: 2px solid white;
}

JavaScript

$(document).ready(function () {
    $('div.thumb img').hoverpulse({
        size: 10, // number of pixels to pulse element (in each direction)
        speed: 200 // speed of the animation 
    });
});