1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>刮刮奖</title>
6 <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
7 <style type="text/css">
8 .container {
9 position: relative;
10 display: inline-block;
11 width: 533px;
12 height: 800px;
13 }
14
15 #robot {
16 position: absolute;
17 top: 0px;
18 left: 0px;
19 z-index: 1;
20 -webkit-box-shadow: 0px 0px 20px 0px #707070;
21 -moz-box-shadow: 0px 0px 20px 0px #707070;
22 box-shadow: 0px 0px 20px 0px #707070;
23 }
24
25 #redux {
26 position: absolute;
27 top: 0px;
28 left: 0px;
29 z-index: 200000;
30 }
31
32 #progress {
33 position: absolute;
34 top: 4px;
35 right: 4px;
36 color: black;
37 pointer-events: none;
38 z-index: 3;
39 text-shadow: 0px 0px 2px #FFFFFF;
40 }
41 </style>
42 </head>
43 <body>
44 <div class="container">
45 <img id="robot" src="bg1.jpg" />
46 <p style="color: red;position: absolute;z-index: 100;">+5</p>
47 <img id="redux" src="bg2.jpg"/>
48 <div id="progress">0%</div>
49 </span>
50
51 <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
52 <script type="text/javascript" src="jquery.eraser.js"></script>
53 <script type="text/javascript">
54 $('#redux').eraser({
55 progressFunction: function(p) {
56 $('#progress').html(Math.round(p*100)+'%');
57 }
58 });
59 </script>
60 </body>
61 </html>
![](https://images2015.cnblogs.com/blog/863199/201607/863199-20160728175208638-1989994936.png)