且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-10-05 12:30:58

简介  

  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
    });


本文转自山边小溪 51CTO博客,原文链接:http://blog.51cto.com/lihongbo/865899,如需转载请自行联系原作者