刮刮卡抽奖是前端活动页常见的功能：
链接：图像擦除插件（下载及教程讲解）
推荐理由：无缝刮痕，兼容性好，上手简单
插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的jquery.eraser.js
使用方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<title>刮刮卡实现</title>
</head>
<style>
.outBox{
position: relative;
top:300px;
width: 300px;
height: 130px;
margin: auto;
z-index: 100;
background: #AB945E;
}
#scratch{
position:relative;
width:100%;
height:100%;
}
#card {
width: 300px;
height: 130px;
line-height:130px;
font-size: 28px;
letter-spacing: 1px;
color:#ff0000;
text-align: center;
}
#guaguaImg{
position: absolute;
top:0;
left:0;
z-index: 10;
width:100%;
height:100%;
}
</style>
<body>
<!--刮奖层-->
<div class="outBox">
<div id="scratch">
<!--必须指定一个id为card的div才能使刮刮卡效果生效-->
<div id="card">女朋友一位</div>
<img src="img/shadow.png" id="guaguaImg"/>
</div>
</div>
<script src="jquery-2.1.0.js"></script>
<script src="jquery.eraser.js"></script>
<script>
//刮刮卡相关方法
function initCard( event ) {
$("#guaguaImg").eraser({
"size":20,
completeRatio: .5, //擦到百分之多少清屏
completeFunction: function(){
remove();
alert("恭喜您获得"+$("#card").html());
}
});
}
function remove(event) {
$("#guaguaImg").eraser(‘clear‘);
}
function reset(event) {
$("#guaguaImg").eraser(‘reset‘);
}
function grow(event) {
$("#guaguaImg").eraser("size",200);
}
//初始化刮刮卡
window.onload = function() {
initCard();
}
</script>
</body>
</html>
效果如图：
原文地址：https://www.cnblogs.com/nanyang520/p/11150250.html
时间： 2024-08-01 13:42:09