簡介　　

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

使用方法

使用非常簡單，只需在img標簽的title屬性中設置放大圖片的路徑，例如：

<img src=”foo.jpg” id=”thumb” title=”foo_hd.jpg” />  

引入Wadda.js文件，并添加如下代碼：

var wad = new Wadda(’thumb’, {
        lensSize: 150,
        xOff: 0,
        yOff: 0,
        fadeLens: true,
        zoom: 2
    });

演示和下載

下面是在線演示頁面和下載鏈接：

演示：Demo 1  Demo 2

下載：Download Files

您可能還喜歡

• 分享5個有趣的 JavaScript 代碼片段
• RoboVoice.com：讓你的網頁會說話
• 8個超棒的免費高質量圖標搜索引擎
• 分享45個海量免費電子書下載網站
• 推薦一個很棒的免費自助建站工具

本文鏈接：Wadda：基于HTML5 Canvas的圖片放大鏡

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源