ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件。这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果。

使用方法
使用这个刮刮卡插件需要引入jQuery和scratchit.js文件以及scratchit.css文件。
<link rel="stylesheet" href="css/scratchit.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/scratchit.js"></script>              
              
              HTML结构
该刮刮卡特效的基本HTML结构如下,使用一个<div>包裹两张图片和一个<canvas>元素。
<div class="scratchit">
  <img src="images/image-to-scratch.jpg" width="400" height="200" />
  <img src="images/image-to-reveal.jpg" width="400" height="200" />
  <canvas width="400" height="200"></canvas>
</div>
              
              初始化插件
在页面加载完毕之后,使用下面的方法来初始化该刮刮卡特效。
<script>
  $(function() {
        var $scratchit = $('.scratchit').scratchIt();
  });
</script>               
              
               
           
         
          
 
                     
                     
                     
                     
                     
                     
                     
                     
                    