jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
更新时间：2017年04月28日 14:06:49 作者：一步小僧
这篇文章主要介绍了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法,结合实例形式分析了jQuery.eraser.js插件的功能、使用方法与相关注意事项,并附带eraser.js插件源码供读者下载使用,需要的朋友可以参考下
本文实例讲述了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中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery合作伙伴左右滚动特效，功能实现非常简单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要为大家详细介绍了jquery插件实现搜索历史，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
下面小编就为大家带来一篇noty – jQuery通知插件全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
jQuery操作CheckBox的方法介绍(选中,取消,取值)
本篇文章主要是对jQuery操作CheckBox的方法(选中,取消,取值)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法2014-01-01
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
新浪微博未登录首页有一个“大家正在说”的模块，动态滚动最新发布的微博。2011-03-03
JQuery 应用 JQuery.groupTable.js
在以往的项目中，数据浏览用的都table 的形式展现。如下图1， 这是一个很常见的表格。通常对分类的字段先进行排序。为了让分类表现的更直观。2010-12-12
jQuery选择器源码解读（六）：Sizzle选择器匹配逻辑分析
这篇文章主要介绍了jQuery选择器源码解读（六）：Sizzle选择器匹配逻辑分析,,需要的朋友可以参考下2015-03-03
虽然前面已经写过两篇关于DivAlert的随笔了，也已经实现了我的需求，但是今天发现很多jQuery插件代码中都使用了extend方法，这样确实让默认设置的代码减少了许多。2010-04-04
以前总是没搞明白是怎么回事，现在是迫不得已，就仔细看了看说明文档，终于测试成功了，记下2011-12-12
最新评论