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

简介  

  Wadda 是下一代图片放大技术,使用 HTML5 Canvas 实现图片放大镜功能。借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果。

 

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

 

使用方法

使用非常简单,只需在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

 

 

本文链接:Wadda:基于HTML5 Canvas的图片放大镜

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏