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.dotdotdot.js使用方法详解
Jun 22 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
使用jquery实现轮播图效果
Jan 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php使用GeoIP库实例
2014/06/27 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Linux下python制作名片示例
2018/07/20 Python
python递归全排列实现方法
2018/08/18 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Django配置文件代码说明
2019/12/04 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android