jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】


Posted in jQuery onApril 28, 2017

本文实例讲述了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法。分享给大家供大家参考,具体如下:

jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件。jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小。

使用需知:

必须确保图片是完全加载之后调用eraser(),否则它不会工作。插件正常运行在Safari,Chrome OS X和Windows,Android和iOS Firefox,黑莓浏览器。

使用方法:

引入核心文件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src='jquery.eraser.js' type='text/javascript'></script>

使用以下代码将图像变成一个可擦除画布。

$('#yourImage').eraser();

添加选项指定画笔大小,(默认值为40):

$('#yourImage').eraser( { size: 30 } );
// 也可以以下面的方式来实现
// $('#yourImage').eraser( "size", 30 }

可以设置参数来重置画布

$('#yourImage').eraser('reset');

可以通过设置clear参数来清除所有的画布

$('#yourImage').eraser('clear');

下面的代码实现当画布被擦除50%时触发事件showResetButton。

$('#yourImage').eraser( {
  completeRatio: .5,
  completeFunction: showResetButton
});

附:jquery.eraser.js点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
You might like
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
三种php连接access数据库方法
2013/11/11 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP常用技巧汇总
2016/03/04 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
最新的互联网创业计划书
2014/01/10 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2016消防宣传标语口号
2015/12/26 职场文书