原始網站：Magnify, a jQuery plugin

購物網站中一定會出�商�的陳列與展示；當使用者�覽網站時，除了�考圖片愈多愈好，能顯示商�細節的大型圖片更是��或缺的存在。但如果�是�開視窗，或是用之�曾經介紹�的 LightBox 燈箱特效；在�在這個五光�色，特效滿天飛的�種網站中，似乎顯得有些普通，�太能�引使用者的注�～這個時候，如果能夠有類似「放大��特效的商�圖片縮放，相信一定更能�引使用者的目光；茫茫網海上的�輩�到大家的需求啦，這時候就�用 Magnify囉�

首先建立簡單的圖片連�：

<table>
  <tr>
    <td colspan="3" style="background-color: #FFFFCC; "><h2>magnify</h2></td>
  </tr>
  <tr>
    <td><a href="images/mustang.jpg" id="d1"><img src="images/mustang_small.jpg" 

alt="mustang" border="0"  /></a></td>
    <td width="50"></td>
    <td><a href="images/triumph.jpg" id="d2"><img src="images/triumph_small.jpg" 

alt="triumph" border="0" align="center" /></a></td>
  </tr>
</table>

接下來載入 jQuery 以� Magnify：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.magnify-1.0.2.js"></script>

然後�入 JavaScript：

<script type="text/javascript">
$(function () {

    $("#d1").magnify();
    $("#d2").magnify({
        showEvent: 'click',
        hideEvent: 'click',
        lensWidth: 60,
        lensHeight: 60,
        preload: false,
        stagePlacement: 'left',
        loadingImage: 'images/ajax-loader.gif',
        lensCss: {
            backgroundColor: '#cc0000',
            border: '0px',
            opacity: 0.5
        },
        stageCss: { border: '4px solid #33cc33' }

    });
});
</script>

呈�的效果就如��首所顯示，�常輕鬆簡單。在看到這個 Plugin 後，我�然想到幾個月� Suzy �到的 Apple Store，其中商�圖縮放的功能，與 Magnify �常類似；當� Jace 還曾經把它加入作業中說（囧）...總之我試著更改 Magnify 的部分原始碼，�果弄出來一個有點類似的感覺的 Plugin～無奈功力�夠，�於縮放時的數學�算部分完全沒有頭緒；索性就用淡入淡出的方��懶帶�（噗）...命�為「magnify_kai�（Magnify˙改...因為�是原創所以就沒有用「wa�開頭囉^^|||）

首先建立簡單的圖片連�：

<table>
  <tr>
    <td colspan="3" style="background-color: #FFFFCC; "><h2>magnify_kai</h2></td>
  </tr>
  <tr>
    <td><a href="images/mustang.jpg" class="magnify_kai"><img 

src="images/mustang_small.jpg" alt="mustang" border="0"  /></a></td>
    <td width="50"></td>
    <td><a href="images/triumph.jpg" class="magnify_kai"><img 

src="images/triumph_small.jpg" alt="triumph" border="0" align="center" /></a></td>
  </tr>
<table>

接下來載入 jQuery 以� Magnify_kai：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="magnify_kai.js"></script>

然後�入 JavaScript：

<script type="text/javascript">
$(function () {

    $('.magnify_kai').fadeZoom({
        preload: false,
        loadingImage: 'images/ajax-loader.gif'
    });
});
</script>

呈�的效果如下：

範例程�下載