zoukankan      html  css  js  c++  java
  • 刮刮奖 --- 可以自定义在图层下添加文字等等信息

     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>

  • 相关阅读:
    python面向对象
    Python基本数据类型
    小刘同学的第一百四十四篇博文
    小刘同学的第一百四十三篇日记
    小刘同学的第一百四十二篇日记
    小刘同学的第一百四十一篇日记
    小刘同学的第一百四十篇日记
    小刘同学的第一百三十九篇博文
    小刘同学的第一百三十八篇日记
    小刘同学的第一百三十七篇日记
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5715732.html
Copyright © 2011-2022 走看看