刮刮卡控件-兼容触控及鼠标

有需求需要做刮刮卡,搜索到一款看起不错的插件,scratchit,试用下来发现不支持触控操作,而且底层只能用图片,修改解决了这两个问题,参考附件:修改后的scratchitScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件。这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果。

使用方法

使用这个刮刮卡插件需要引入jQueryscratchit.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 class="hover" src="image-to-scratch.png"/>
<div class="content">
刮开后的展示效果
</div>
<canvas style="width: 100%; height: 100%;"></canvas>
</div>

 初始化插件

在页面加载完毕之后,使用下面的方法来初始化该刮刮卡特效。

<script>
  $(function() {
        var $scratchit = $('.scratchit').scratchIt();
  });
</script>    


打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.