jQuery.eraser 图像蒙版擦除插件 - 文章教程

jQuery.eraser 图像蒙版擦除插件

发布于 2020-05-22 字数 2663 浏览 1220 评论 0

jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。

jQuery.eraser 图像蒙版擦除插件

jQuery.eraser 的原理其实是有灰色、彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的效果。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.eraser.js"></script>

2、HTML

<div class="wenjiangs">
  <img src="images/1.jpg" alt="jQuery.eraser 图像蒙版擦除插件">
  <img id="redux" src="images/2.jpg" alt="jQuery.eraser 图像蒙版擦除插件">
</div>

3、CSS

* {
  margin: 0;
  padding: 0;
}
.wenjiangs {
  position: relative;
  width: 700px;
  height: 438px;
  margin: 0 auto;
}
.wenjiangs img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#redux {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

4、JavaScript

$(function(){
  $('#redux').eraser();
});

配置

属性/方法 类型 默认值 说明
size 整数 40 橡皮擦大小
completeRatio 浮点数 0.7 擦出比率
completeFunction 函数 null 配合 completeRatio 使用,达到擦出比率后的函数
progressFunction 函数 null 擦出后的回调函数,他接收一个参数,为擦出后的比率(0.0 – 1.0)
reset 重置,即还原成未擦出的状态,如:$(‘#yourImage’).eraser(‘reset’);
clear 清除,如:$(‘#yourImage’).eraser(‘clear’);

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论