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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现开关灯效果
Aug 02 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
php zend 相对路径问题
2009/01/12 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python连接DB2数据库
2016/08/27 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python reques接口测试框架实现代码
2020/07/28 Python
一套比较完整的软件测试人员面试题
2012/05/13 面试题
会计专业个人求职信范文
2014/01/08 职场文书
小区门卫值班制度
2014/01/24 职场文书
环保倡议书怎么写
2014/05/16 职场文书
教师节横幅标语
2014/10/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
小学中队委竞选稿
2015/11/20 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
导游词之峨眉山
2019/12/16 职场文书