jquery.eraser制作擦涂效果

<pre>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<title>
canvas画图
</title>
</head>

<body>
<img id="redux" style="width:60%;" src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
<script type="text/javascript" src="/moban/js/jquery.min.js"></script>
<script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
<script type="text/javascript">
$(function() {
$('#redux').eraser({
completeRatio: .6,
size: 20,
completeFunction: showResetButton
});
})
function showResetButton(){
alert('刮完');
}
</script>
</body>

</html>
</pre>

ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

ps:这个刮刮卡fadeIn以后再触发代码 不然识别不到

可以用于刮刮卡

jquery.eraser制作擦涂效果的更多相关文章

  1. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  2. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  3. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  4. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  5. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  6. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  8. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  9. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

随机推荐

  1. NOIP2011计算系数；

    #include<cmath> #include<algorithm> #include<stdio.h> #include<iostream> #de ...

  2. 开发 Django 博客文章阅读量统计功能

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 如何精确地记录一篇文章的阅读量是一个比较复杂的问题,不过对于我们的博客来说,没有必要 ...

  3. sql获取各种时间格式的方法

    ),)--月/日/年 ),)--年.月.日 (常用) ),)--日/月/年 ),)--日.月.年 ),)--日-月-年 ),)--日 月 年

  4. Python web编程 初识TCP UDP

    Python网络编程之初识TCP,UDP 这篇文章是读了<Python核心编程>第三版(Core Python Applications)的第二章网络编程后的自我总结. 如果有不到位或者错 ...

  5. VMware ESXI6.0服务器安装系列：RAID设置

    本文转载至http://www.scriptjc.com/article/847 1.连接显示器 2.插上键盘.U盘.显示器 3.看显示屏上的提示,按F12关机 4.关机前输入密码,然后按回车键 更换 ...

  6. 九、Executor框架

    Executor框架 ​ 我们知道线程池就是线程的集合,线程池集中管理线程,以实现线程的重用,降低资源消耗,提高响应速度等.线程用于执行异步任务,单个的线程既是工作单元也是执行机制,从JDK1.5开始 ...

  7. 致远OA_0day批量植Cknife马一步到位

    最近各位师傅都在刷这个嘛,原本的exp是上传一个test123456.jsp的命令执行的马子,不过我在试的时候发现替换成C刀一句话出错,原因未知,并且test123456.jsp如果存在的话用原来ex ...

  8. Flash XSS漏洞快速上手

      0x01 Flash XSS xss一是指执行恶意js,那么为什么说flash xss呢?是因为flash有可以调用js的函数,也就是可以和js通信,因此这些函数如果使用不当就会造成xss.常见的 ...

  9. windows自带的netsh的使用

    0x01netsh简介 自Windows XP开始,Windows中就内置网络端口转发的功能.任何传入到本地端口的TCP连接(IPv4或IPv6)都可以被重定向到另一个本地端口,或远程计算机上的端口, ...

  10. NOIP2009 Hankson 的趣味题 ： 数论

    题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲解 ...