首页 > html5资讯 > 正文

基于HTML5 canvas的jQuery刮刮卡效果
2015-08-06 19:19:57   来源:   评论:0 点击:

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

  使用方法
  使用这个刮刮卡插件需要引入jQuery和scratchit.js文件以及scratchit.css文件。
  1. <link rel="stylesheet" href="css/scratchit.css">
  2. <script src="js/jquery-1.11.1.min.js"></script>
  3. <script src="js/scratchit.js"></script>
复制代码

  HTML结构
  该刮刮卡特效的基本HTML结构如下,使用一个<div>包裹两张图片和一个<canvas>元素。
  1. <div class="scratchit">
  2. <img src="images/image-to-scratch.jpg" width="400" height="200" />
  3. <img src="images/image-to-reveal.jpg" width="400" height="200" />
  4. <canvas width="400" height="200"></canvas>
  5. </div>
复制代码
    初始化插件  在页面加载完毕之后,使用下面的方法来初始化该刮刮卡特效。
  1. <script>
  2. $(function() {
  3. var $scratchit = $('.scratchit').scratchIt();
  4. });
  5. </script>
复制代码
  查看演示请点击     下载插件请点击\01插件.zip


相关热词搜索:

上一篇:基于Bootstrap的可展开表格行的jQuery表格插件
下一篇:2种SVG和CSS3创意无限循环动画特效

分享到: 收藏
评论排行