温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-25 01:29:11 来源:网络 阅读:330 作者:山边小溪 栏目:移动开发

简介  

  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

 

您可能还喜欢

 

  • 分享5个有趣的 JavaScript 代码片段
  • RoboVoice.com:让你的网页会说话
  • 8个超棒的免费高质量图标搜索引擎
  • 分享45个海量免费电子书下载网站
  • 推荐一个很棒的免费自助建站工具

 

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI