jquery.eraser实现刮奖显示结果效果代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：jquery.eraser实现刮奖显示结果效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html style="font-size: 40px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery.eraser刮奖效果 www.bootstrap.com</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="layoutmode" content="standard">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Pragma" content="no-cache">
    <script type="text/javascript">
        var _htmlFontSize = (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth: document.body.clientWidth;
            if (clientWidth > 640) clientWidth = 640;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
            return clientWidth * 1 / 16;
        })();
    </script>
    <style>

        * {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            margin: 0;
            -webkit-touch-callout: none;
            /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;
            /* prevent webkit from resizing text to fit */
            /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            -webkit-user-select: none;
            /* prevent copy paste, to allow, change 'none' to 'text' */
            /* -webkit-tap-highlight-color: rgba(0,0,0,0); */
        }

        html {
            height: 100%
        }

        input,
        textarea {
            -webkit-user-select: text
        }

        a {
            color: #000;
            padding: 0;
            text-decoration: none;
            cursor: pointer;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma
        }

        video {
            width: 100%
        }

        input[type="radio"],
        input[type="checkbox"] {
            vertical-align: -2px
        }

        .main_box {
            position: relative;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background: #CD261D;
            background: url(//repo.bfw.wiki/bfwrepo/image/5fc49de4f2986.png) center no-repeat;
            background-size: cover;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma
        }

        .main_box .box {
            width: 100%;
            padding-top: 50px;
            /*background: #CD261D;*/
            border-radius: 10px;
            -webkit-border-radius: 10px;
        }

        .main_box .box .bg_in {
            border-radius: 6px;
            -webkit-border-radius: 6px;
        }

        .main_box .box .bg_in .title {
            color: #fff;
            font-size: 0.9rem;
            text-align: center;
            padding: 0.25rem 0;
        }

        .main_box .box .content {
            z-index: 10;
            position: relative;
            width: 13rem;
            height: 6rem;
            margin: 0 auto 0 auto;
            background: #CD261D;
            border-radius: 6px;
            -webkit-border-radius: 6px;
        }

        #mask_img_bg {
            position: absolute;
            left: 0.2rem;
            top: 0.2rem;
            bottom: 0.2rem;
            right: 0.2rem;
            background: #fff;
            border-radius: 6px;
            -webkit-border-radius: 6px;
        }

        #mask_img_bg img {
            width: 5.3rem;
            height: 5.5rem;
            margin: 0 auto;
            display: block;
        }

        #redux {
            z-index: 22;
            position: absolute;
            padding: 0.2rem;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 6px;
            -webkit-border-radius: 6px;
        }

        .main_box .hint-show {
            display: none;
            position: absolute;
            left: 50%;
            top: 6rem;
            width: 286px;
            height: 245px;
            margin-left: -143px;
            z-index: 99;
        }

        .main_box .hint-show .hint-img {
            width: 286px;
            height: 245px;
        }

        .main_box .hint-show .colour-img {
            width: 239px;
            height: 138px;
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -120px;
            z-index: 110;
        }

        .main_box .hint-show .prize-img {
            width: 116.5px;
            height: 121.5px;
            position: absolute;
            top: 74px;
            left: 50%;
            margin-left: -60px;
            z-index: 100;
        }
        .cont-span {
            display: block;
            width: 120px;
            height: 38px;
            text-align: center;
            position: absolute;
            top: 40%;
            left: 50%;
            margin-left: -60px;
            z-index: 10;
        }
        .main_box .hint-show .prize-span {
            display: block;
            width: 120px;
            height: 38px;
            text-align: ce.........完整代码请登录后点击上方下载按钮下载查看