jquery plugin hoverpulse

jquery plugin hoverpulse 的套用方法

hoverpulse({size:20,speed:30})

size: 20, // 圖片放大的比例
speed: 300 // 圖片放的速度

<img sec="imges/floatpic.jpg" />

//引入hoverpulse.js檔

$(document).ready(function() {
    $(".thumb img").hoverpulse();//啟動hoverpulse()
});  

<style type="text/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; }
</style>

//要修改css資料 要不然圖片不會正正排列

<div id="thumbs">

    <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach2.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach3.jpg" width="64" height="64" /></div>
   
    <div class="thumb"><img src="images/beach4.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach5.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach6.jpg" width="64" height="64" /></div>
   
    <div class="thumb"><img src="images/beach7.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach8.jpg" width="64" height="64" /></div>
    <div class="thumb"><img src="images/beach9.jpg" width="64" height="64" /></div>
   </div>

參考文獻:
http://malsup.com/jquery/
http://my-web-design.blogspot.com/2008/11/jquery-17plugin_28.html
檔案:
jquery.hoverpulse.js