1.     <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas/>
  5. <script>
  6.     (function(bodyStyle) {
  7.         bodyStyle.mozUserSelect = 'none';
  8.         bodyStyle.webkitUserSelect = 'none';
  9.  
  10.         var img = new Image();
  11.         var canvas = document.querySelector('canvas');
  12.         canvas.style.backgroundColor='transparent';
  13.         canvas.style.position = 'absolute';
  14.  
  15.         img.addEventListener('load', function(e) {
  16.             var ctx;
  17.             var w = img.width,
  18.                 h = img.height;
  19.             var offsetX = canvas.offsetLeft,
  20.                 offsetY = canvas.offsetTop;
  21.             var mousedown = false;
  22.  
  23.             function layer(ctx) {
  24.                 ctx.fillStyle = 'gray';
  25.                 ctx.fillRect(0, 0, w, h);
  26.             }
  27.  
  28.             function eventDown(e){
  29.                 e.preventDefault();
  30.                 mousedown=true;
  31.             }
  32.  
  33.             function eventUp(e){
  34.                 e.preventDefault();
  35.                 mousedown=false;
  36.             }
  37.  
  38.             function eventMove(e){
  39.                 e.preventDefault();
  40.                 if(mousedown) {
  41.                     if(e.changedTouches){
  42.                         e=e.changedTouches[e.changedTouches.length-1];
  43.                     }
  44.                     var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
  45.                         y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
  46.                     with(ctx) {
  47.                         beginPath()
  48.                         arc(x, y, 20, 0, Math.PI * 2);
  49.                         fill();
  50.                     }
  51.                 }
  52.             }
  53.  
  54.             canvas.width=w;
  55.             canvas.height=h;
  56.             canvas.style.backgroundImage='url('+img.src+')';
  57.             ctx=canvas.getContext('2d');
  58.             ctx.fillStyle='transparent';
  59.             ctx.fillRect(0, 0, w, h);
  60.             layer(ctx);
  61.  
  62.             ctx.globalCompositeOperation = 'destination-out';
  63.  
  64.             canvas.addEventListener('touchstart', eventDown);
  65.             canvas.addEventListener('touchend', eventUp);
  66.             canvas.addEventListener('touchmove', eventMove);
  67.             canvas.addEventListener('mousedown', eventDown);
  68.             canvas.addEventListener('mouseup', eventUp);
  69.             canvas.addEventListener('mousemove', eventMove);
  70.         });
  71.         img.src = 'prize.jpg';
  72.     })(document.body.style);
  73. </script>
  74. </body>
  75. </html>
  76.         <style>body{
  77.     margin:50px;
  78.   background-color:#2C3437;
  79. }
  80. .content{
  81.   display:inline-block;
  82.   width:350px;
  83.   height:239px;
  84.   margin-right:-4px;
  85. }
  86. .play{
  87.     cursor:pointer;
  88.     background-color:#060;
  89. }
  90. div>div{
  91.   display:block;
  92.   height:20px;
  93. }
  94. div>div>div{
  95.   width:16px;
  96.   height:16px;
  97.   background-color:#FFF;
  98.   display:inline-block;
  99.   float:right;
  100.   margin:2px;
  101. }
  102. </style>
  103.                 <script>$(document).ready(function(){
  104.     animate();
  105.   $(".play").click(animate).mouseover(function(){
  106.       $(".play").css({"background-color":"#A55"});
  107.   }).mouseout(function(){
  108.       $(".play").css({"background-color":"#060"});
  109.   });
  110. });
  111. function animate(){
  112.       $('div>div>div').each(function(id){
  113.     $(this).css({
  114.       position: 'relative',
  115.       top: '-200px',
  116.       opacity: 0
  117.     });
  118.     var wait = Math.floor((Math.random()*3000)+1);
  119.     $(this).delay(wait).animate({
  120.       top: '0px',
  121.       opacity: 1
  122.     },1000);
  123.   });
  124. }
  125. </script>
  126.  
  127. <!-- Generated by RunJS (Mon Mar 24 17:39:15 CST 2014) 1ms -->

这张图片是prize.jpg

js实现刮刮卡效果的更多相关文章

  1. js实现刮刮卡抽奖

    刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解)    推荐理由:无缝刮痕,兼容性好,上手简单   插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博 ...

  2. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  3. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  4. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  5. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  6. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  7. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  8. js-刮刮卡效果，由jquery-eraser源码改的vue组件

    vue-eraser 一款用于vue刮刮卡的组件 github地址: vue-eraser npm地址: vue-eraser 在网上有看到过几个版本的组件,都有点问题 1.拉快了,就会断,连不起来( ...

  9. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  10. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

随机推荐

  1. MVC使用Google OAuth[OWIN]注意事項

    1.前提條件,申請一個client id,頁面:https://console.developers.google.com/ 2.添加連接域名,javascript那欄位為域名即可,另一欄需要加上具體 ...

  2. linux下开发c第一弹－－相关环境需求

    我用的是mac,mac和linux一般集成了一定的开发环境,基本上需要gcc.vim.gdb之类的,linux下需要apt-get,mac下homebrew的brew install都可以解决问题.同 ...

  3. 关于Js脚本的延迟执行

      关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面.这一次我们着重讲解一下放在标签内部.在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的. ...

  4. Java设计模式系列之观察者模式

    观察者模式 Observer的定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态上发生变化时,会通知所有观察者对象,让它们能够自动更新自己. 第一 ...

  5. UVALive 7461 Separating Pebbles （计算几何）

    Separating Pebbles 题目链接: http://acm.hust.edu.cn/vjudge/contest/127401#problem/H Description http://7 ...

  6. 439. Segment Tree Build II

    最后更新 08-Jan-2017 开始介绍线段树的主要作用了,可以快速在区间查找极值,我猜是这样的..... 一个NODE的最大值取决于它左边和右边最大值里大 按个,所以,所以什么?对了,我们该用po ...

  7. SQLite的37个核心函数

    转载:http://www.feiesoft.com/00012/ abs(X) abs(X)返回 X 的绝对值. Abs(X) returns NULL if X is NULL. Abs(X) r ...

  8. 【BJG吐槽汇】第一期 - 警惕亚马逊莫名自动扣款！千万不要进了它的坑！

    BJG吐槽汇:一直以来我都觉得其实生活中工作中会有各种各样奇葩的事或者奇葩的人可以去吐槽,那么BeJavaGod本身聊得就是关于JavaWeb技术,互联网技术,互联网产品等,那么今天起咱们开了这么一档 ...

  9. Java学习笔记（二）：String

    String 在Java中String是作为引用对象存在的一种数据类型,用来保存字符串. 实例化和赋值 //直接声明 String s1 = "Hello world!"; //通 ...

  10. [Windows驱动开发]（二）基础知识——数据结构

    本节主要介绍驱动开发的一些基础知识. 1. 驱动程序的基本组成 1.1. 最经常见到的数据结构 a. DRIVER_OBJECT驱动对象 // WDK中对驱动对象的定义 // 每个驱动程序都会有一个唯 ...