scratchCard

功能描述

纯js实现的刮刮卡效果，用例见 scratchCard.html

依赖的插件

./libs/scratchCard.js

快速使用

页面html元素

<div class="scratch">
    <div class="card">
        <img src="./image/scratchCard-example1.png" alt="" />
    </div>
</div>

CSS样式

.scratch { position: relative; } 
.cover { position: absolute; top: 0; left: 0; } 
.card { -webkit-user-select: none; user-select: none; background: #FAFAFA; } 
.card img { width: 100%; height: 100%; } 
.scratch { width: 300px; margin: 20px auto 0; border: 1px solid #ccc; }

引入插件文件，初始化页面元素

<script type="text/javascript" src="./libs/scratchCard.js"></script>

使用方法

scratchCard.case({params}, callback())

params

scratch

  • 类型：dom元素
  • 描述：刮刮区域的父级元素

card

  • 类型：dom元素
  • 描述：刮刮的区域

coverImg

  • 类型：字符串
  • 描述：奖品的图片

callback()

回调方法，刮出奖品执行此方法

scratchCard.case({
    scratch: '.scratch',
    card: '.card',
    coverImg: './image/example.png',
    callback: function() {
        alert('中奖啦！');
        //清除掉刮开层的所有像素
        this.clearCover();
    }
});
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24