Wadda：基于 HTML5 Canvas 的图片放大镜

简介　　

　　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的图片放大镜

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源