jQuery擦除插件eraser使用方法详解


Posted in jQuery onJanuary 11, 2020

eraser插件简介:

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

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

eraser使用方法:

1.引入文件

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

2.HTML

<div id="box">
 <img id="real" src="img/real.jpg" alt="底部">
 <img id="cover" src="img/cover.jpg" alt="上部">
</div>

3.CSS

*{
 margin: 0px;
 padding: 0px;
}
#box{
 width: 400px;
 position: relative;
 margin-left: 50%;
 left: -200px;
}
#box img{
 width: 100%;
 height: auto;
 position: absolute;
 float: left;
 z-index: 1;
}
#cover{
 width: 100%;
 height: auto;
 position: absolute;
 float: left;
 z-index: 999;
}

4.JavaScript

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

5.更多配置选项

//设置擦出画笔的大小
$('#cover').eraser({size:80});
//点击"重置"按钮,将画布重置
$('#reset').click(function(){
 $('#cover').eraser('reset');
});
//点击"清除"按钮,将整块画布擦除
$('#remove').click(function(){
 $('#cover').eraser('clear');
});
//当擦出率达到50%的时候,调用函数
$('#cover').eraser({
 completeRatio: 0.1,
 completeFuction:function(){
  alert("擦除已经达到50%");
 }
});

6.注意事项

需要说明的是,如果想设置画笔的大小,设置擦除一定比例之后调用一个函数,要在初始化画布的时候一同设置。例如:

$('#cover').eraser({
 size:80,
 completeRatio:0.5,
 completeFunction:function(){
  alert(666);
 }
});

否则,后面设置的画笔大下和调用函数是没有作用的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
详解jQuery-each()方法
Mar 13 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP网站基础优化方法小结
2008/09/29 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
jquery each()源代码
2011/02/14 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
python增加矩阵维度的实例讲解
2018/04/04 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python谱减法语音降噪实例
2019/12/18 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python实现IOU计算案例
2020/04/12 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
行政主管职责范本
2014/03/07 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
火锅店的活动方案
2014/08/15 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
小学运动会报道稿
2015/07/22 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server