来源：http://www.hengtaiboyuan.com 作者：恒泰博远 时间：2015-06-09
简要教程
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>
关注恒泰博远官方微信，即可免费体验微信定制功能，HTML5营销游戏和场景应用，以及免费的微信企业号功能使用
想免费体验微信企业号，关注恒泰博远官方微信后，点击-企业号-快速体验，输入相关信息，即可免费体验。
本文链接：http://www.hengtaiboyuan.com/jsdt/content_910 转载请注明来自北京恒泰博远科技有限公司
您的位置 :