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 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>
