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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现鼠标滑动切换图片
May 27 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
python爬虫爬取网页表格数据
2018/03/07 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
python获取整个网页源码的方法
2020/08/03 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
大学生毕业求职信
2014/06/12 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
检讨书怎么写
2015/05/07 职场文书
企业法人任命书
2015/09/21 职场文书