浙江 杭州

基于HTML5 canvas的jQuery刮刮卡效果

系统分类: 网页特效 - html5 2016-11-30

人气4696

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


ScratchIt是一款基于HTML5 canvasjQuery刮刮卡效果插件。这个刮刮卡效果使用两张图片和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>               
              

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:197.57KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2068.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于HTML5 canvas的jQuery刮刮卡效果

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)