css布局实现一个手机端移动端大转盘抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：大转盘

代码描述：css布局实现一个手机端移动端大转盘抽奖效果代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        .rotary_box {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: #000;
            opacity: 0.6;
            filter: alpha(opacity=50);
            z-index: 2147483646;
            display: none;
        }
        .rotary_fuzhu {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            z-index: 2147483646;
            display: none;
        }
        .rotary_wrap {
            height:600px;
            width: 350px;

            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/rotary_wrap.png);
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 2147483647;
            display: none;
        }
        .rotary_wrap .looper_close {
            width: 22px;
            height: 22px;
            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/close.png);
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        .rotaryArrow {
            width: 103px;
            left:  calc( 50% - 51px);
             top: calc( 50% - 42px);
            height: 152px;
            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/start.png);
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: center center;
            position: absolute;

            cursor: pointer;
        }
        .result {

            background: rgba(0,0,0,0.75);
            border-radius: 3px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            display: none;
        }
        .result .top_rotary {
            width: 100%;
            height: 28px;
            overflow: hidden;
        }
        .result a {
            display: block;
            width: 16px;
            height: 22px;
            text-align: center;
            float: right;
            color: #fff;
            margin: 8px;
        }
        .result .form {
            width: 86%;
            margin: 10px auto;
            height: 420px;
        }
        .result .rotary_title {
            font-size: 18px;
            color: #fff;
            text-align: center;
        }
        .result .form .input {
            width: 96%;
            margin: 20px auto;
            height: 40px;
            text-align: center;
        }
        .result .form .input span {
            display: block;
            width: 15%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            color: #DE5044;
            float: left;
        }
        .result .form .input .inp {
            width: 78%;
            height: 28px;
            border-radius: 5px;
            margin-top: 5px;
            padding-left: 1%;
            border: 0;
            background: #FFF;
            float: left;
        }
        .result .form .input .submit {
            width: 150px;
            height: 28px;
            border: 0;
            padding: 0;
            border-radius: 5px;
            background: #1CA261;
            color: #FFF;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <!--转盘-->
    <div class="rotary_box">
        <div class="rotary_fuzhu"></div>
    </div>
    <div class="rotary_wrap">
        <a href="javascript:" class="looper_close" title="Close this thing"></a>
        <div class="rotaryArrow" title="Began to draw" id="rotaryArrow"></div>
        <div class="result">
            <li class="top_rotary">
                <a href="javascript:" id="resultBtn" title="close"><img src="http://hzh.tedu.cn/hd/chacha.png"></a>
            </li>
            <div class="form">
                <form id="form" name="form" action="" target="actionframe" enctype="multipart/form-data" method="post">
                    <p class="rotary_title">
                        留下您的联系方式即可上门领奖！
                    </p>
                    <div class="input">
                        <span class="prize">奖品：</span>
                        <input class="inp" type="text" style="cursor:not-allowed" readonly id="resultTxt">
                        <input type="hidden" name="jp" id="resultTxt1">
                    </div>
                    <div class="input">
                        <span>姓名：</span>
                        <input class="inp" id="name" type="text" name="name">
                    </div>
                    <div class="input">
                        <span>手机：</span>
                        <input class="inp" id="tel" type="text" name="tel">
                    </div>
                    <div class="input">
                        <input class="submit" type="submit" value="立即领取">
                    </div>
                </form>
                <iframe name="actionframe" type="hidden" style="display: none;" width="0" height="0"></iframe>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.rotate.js"></script>
    <script type="text/javascript">

        //惠州弹出层抽奖
        $(document).ready(function() {
            var $rotaryArrow = $('#rotaryArrow');
            var $close = $(".close");
            var $raotary_looper = $(".rotary_box");
            var $rotary_wrap = $(".rotary_wrap");
            var $result = $('.result');
            var $rotary_fuzhu = $(".rotary_fuzhu");
            var $resultTxt = $('#resultTxt');
            var $resultTxt1 = $('#resultTxt1');
            var $resultBtn = $('#resultBtn');
            var $rotaryNot = $('#rotaryNot');
            var $submit = $('.submit');
            var $looper_close = $('.looper_close');
            if ($.cookie('rotary_time_hzh') == null) {
                setTimeout(function() {
                    $raotary_looper.fadeIn(200);
                    $rotary_wrap.fadeIn(200);
                }, 2000);
            } else {
                if ($.cookie('rotary_text_hzh') != null) {
                    if ($.cookie("rotary_result_hzh") == null) {
                        setTimeout(function() {
                            $raotary_looper.fadeIn(200);
                            $rotary_wrap.fadeIn(200);
        .........完整代码请登录后点击上方下载按钮下载查看