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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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
Terran建筑一览
2020/03/14 星际争霸
php中的登陆login实例代码
2016/06/20 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
javascript 禁止复制网页
2009/06/11 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
宿舍违规检讨书
2014/01/12 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年组织部工作总结
2015/04/03 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
python异常中else的实例用法
2021/06/15 Python