刮刮卡抽奖是前端活动页常见的功能:
链接:图像擦除插件(下载及教程讲解)
推荐理由:无缝刮痕,兼容性好,上手简单
插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博客文件中的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-10-10 04:14:21