Wadda：基于 HTML5 Canvas 的圖檔放大鏡

　　Wadda 是下一代圖檔放大技術，使用 HTML5 Canvas 實作圖檔放大鏡功能。借助 HTML5 Canvas 标簽，能夠自定義放大級别而不需要為每個級别定義圖檔，還能夠設定羽化（Fading）效果。

<a target="_blank" href="http://neofreeman.freepgs.com/experiments/zoomr/puggy.html"></a>

使用非常簡單，隻需在img标簽的title屬性中設定放大圖檔的路徑，例如：

<a href="http://blog.51cto.com/lihongbo/865899#">?</a>

<code>&lt;</code><code>img</code> <code>src=”foo.jpg” id=”thumb” title=”foo_hd.jpg” /&gt; </code>

引入Wadda.js檔案，并添加如下代碼：

<code>var</code> <code>wad = </code><code>new</code> <code>Wadda(’thumb’, {</code>

<code>        </code><code>lensSize: 150,</code>

<code>        </code><code>xOff: 0,</code>

<code>        </code><code>yOff: 0,</code>

<code>        </code><code>fadeLens: </code><code>true</code><code>,</code>

<code>        </code><code>zoom: 2</code>

<code>    </code><code>});</code>

本文轉自山邊小溪 51CTO部落格，原文連結：http://blog.51cto.com/lihongbo/865899，如需轉載請自行聯系原作者