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中的deferred使用方法
Mar 27 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php define的第二个参数使用方法
2013/11/04 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
Smarty变量用法详解
2016/05/11 PHP
php验证码生成器
2017/05/24 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
JS解析XML的实现代码
2009/11/12 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python简明入门教程
2015/08/04 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
2014年祖国生日寄语
2014/09/19 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年设计师工作总结
2014/11/25 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python