jquery.rotate实现一个手机端大转盘抽奖活动效果代码-html代码-BFW代码库

代码语言：html
所属分类：大转盘
代码描述：jquery.rotate实现一个手机端大转盘抽奖活动效果代码，包含中奖纪录及查看规则
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
        	margin:0px;
        	padding:0px;
        	background:#1e0d45;
        	color:#fff
        }
        #banner {
        	width:100%;
        	height:auto;
        	position:relative;
        }
        #share {
        	position:absolute;
        	top:2vw;
        	right:2vw;
        	width:22%
        }
        li {
        	list-style:none;
        	color:#303030
        }
        .tit-img,.tit-img>img,.lilv,.lilv>img,.fl3-tit {
        	width:100%;
        	height:auto;
        	display:block;
        }
        .times {
        	width:80%;
        	height:10vw;
        	line-height:10vw;
        	margin:0 auto;
        	background:pink;
        	border-radius:5vw;
        	font-size:3.9vw;
        	background:-moz-linear-gradient(left,#fb975c,#fb6153);
        	background:-webkit-gradient(linear,0 50%,100% 50%,from(#fb975c),to(#fb6153));
        	background:-webkit-linear-gradient(left,#fb975c,#fb6153);
        	background:-o-linear-gradient(left,#fb975c,#fb6153);
        }
        .times>p {
        	text-align:center;
        	margin:0px;
        }
        #gz-b {
        	width:25%;
        	display:block;
        	margin:0 auto;
        }
        .fl3-tit {
        	margin-top:5vw;
        	position:relative;
        }
        #fl3-img {
        	display:block;
        	width:69%;
        	margin:0 auto;
        }
        #b-guang {
        	width:15%;
        	position:absolute;
        	right:0vw;
        	top:0vw
        }
        .zp-box {
        	width:100%;
        	height:auto;
        	position:relative;
        }
        .dp-box {
        	width:90%;
        	height:auto;
        	margin:0 auto;
        	margin-top:5vw;
        	margin-bottom:5vw;
        }
        .dp-box>img,.zhizhen>img {
        	width:100%
        }
        .zhizhen {
        	width:30%;
        	height:auto;
        	position:absolute;
        	top:25vw;
        	left:35vw;
        }
        #cishu-text {
        	color:#d32833;
        	text-align:center;
        	position:absolute;
        	top:15vw;
        	left:7vw;
        	font-size:4vw;
        	font-weight:bold;
        }
        .jl {
        	width:90%;
        	height:12vw;
        	line-height:12vw;
        	margin:0 auto;
        	border-radius:2vw;
        	color:#b9925b;
        	font-size:4vw;
        	background:-moz-linear-gradient(top,#fff8eb,#fee9c5);
        	background:-webkit-gradient(linear,0 50%,100% 50%,from(#fff8eb),to(#fee9c5));
        	background:-webkit-linear-gradient(top,#fff8eb,#fee9c5);
        	background:-o-linear-gradient(top,#fff8eb,#fee9c5);
        }
        .jl>p>span {
        	color:#d32833;
        }
        .jl>p {
        	text-align:center;
        }
        #zjjl {
        	margin-right:4vw
        }
        #look-gz {
        	margin-left:5vw
        }
        .gdbox {
        	width:90%;
        	height:auto;
        	margin:0 auto;
        	background:-moz-linear-gradient(top,#fff3de,#fae6c2);
        	background:-webkit-gradient(linear,0 50%,100% 50%,from(#fff3de),to(#fae6c2));
        	background:-webkit-linear-gradient(top,#fff3de,#fae6c2);
        	background:-o-linear-gradient(top,#fff3de,#fae6c2);
        }
        .gdbox>strong {
        	display:block;
        	color:#303030;
        	text-align:center;
        	padding:3vw 0vw;
        	margin-top:10px;
        }
        .gdbox>p {
        	text-align:center;
        	color:#303030;
        	margin:0px;
        	background:#b9925b
        }
        #hdtab {
        	display:block;
        	height:auto;
        }
        /*#tab-head {
        	background:#b9925b;
        }
        */.btn {
        	width:60%;
        	height:12vw;
        	line-height:12vw;
        	background:#f32d3e;
        	margin:0 auto;
        	text-align:center;
        	color:#fff;
        	border-radius:6vw;
        	margin-top:8vw;
        	margin-bottom:8vw;
        }
        .sm-box {
        	width:90%;
        	margin:0 auto;
        	font-size:3.5vw;
        	line-height:1.7;
        }
        .sm-box>img {
        	display:block;
        	width:90%;
        	margin:0 auto;
        }
        #tzbtn {
        	text-decoration:none;
        	color:#fff
        }
        .zz {
        	width:100%;
        	height:100%;
        	position:fixed;
        	z-index:500;
        	top:0px;
        	background:rgba(0,0,0,0.7);
        	display:none;
        }
        .cjfx,.zpgz,.zj,.wcs,.today,.jl-tk {
        	width:80%;
        	height:auto;
        	position:fixed;
        	z-index:600;
        	top:22%;
        	left:10%;
        	display:none;
        }
        #cjgz-img {
        	width:100%;
        	position:relative;
        }
        .cjgz-c {
        	width:12%;
        	position:absolute;
        	z-index:601;
        	top:-13vw;
        	right:-17px
        }
        .zj-content {
        	width:80%;
        	height:10vw;
        	line-height:10vw;
        	background:#dcc49a;
        	margin:0 auto;
        	text-align:center;
        	position:absolute;
        	top:30vw;
        	left:10%;
        	z-index:650
        }
        .zj-content>p {
        	margin:0px;
        	color:#080a11;
        	font-size:4vw
        }
        #mytime {
        	margin-right:9vw
        }
        #myjl {
        	margin-left:12vw
        }
        ul {
        	padding:0px;
        	width:100%;
        	height:190px;
        	overflow:auto;
        	display:block;
        	color:#080a11;
        	font-size:4vw;
        }
        @media screen  and (max-width:320px) {
        	/* 设置中奖纪录iphone5的高度 */	ul {
        	height:160px
        }
        }li>span:nth-child(1) {
        	margin-right:7vw
        }
        li>span:nth-child(2) {
        	margin-left:7vw
        }
        #tit>span:nth-child(1) {
        	margin-right:8vw;
        }
        #tit>span:nth-child(2) {
        	margin-left:12vw
        }
        #tit {
        	width:80%;
        	margin:0 auto;
        	height:8vw;
        	line-height:8vw;
        	color:#fff;
        }
        /*中奖滚动*/.zhongj-bbk {
        	width:89.1%;
        	height:auto;
        	margin:0 auto;
        	padding-top:10px;
        }
        .zhongj-bt,.zhongj-bb {
        	width:90%;
        	height:35px;
        	font-size:16px;
        	font-weight:700;
        	border-radius:10px;
        	margin:0 auto;
        	line-height:35px;
        	text-align:center;
        }
        .shouj,.phone {
        	width:55%;
        	height:100%;
        	float:left;
        }
        .jj,.money {
        	width:45%;
        	height:100%;
        	float:left;
        }
        .zhongj-bbk {
        	padding-top:5px;
        	padding-bottom:8px;
        }
        .zhongj-bb {
        	height:140px;
        	font-weight:400;
        }
        .zhongj-bbl {
        	width:55%;
        	height:140px;
        	float:left;
        }
        .zhongj-bbr {
        	width:45%;
        	height:140px;
        	float:left;
        }
        .wcs-img,.tz-img,.zj-img {
        	position:relative;
        	width:100%
        }
        .ok-img {
        	position:absolute;
        	width:50%;
        	bottom:5vw;
        	left:25%
        }
        .texts {
        	position:absolute;
        	width:80%;
        	top:5vw;
        	left:10%;
        	text-align:center;
        	color:#303030;
        	line-height:1.7;
        	font-weight:bold;
        	font-size:4.5vw
        }
    </style>
</head>

<body>
    <div class="zp-box">
        <div class="dp-box"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/dipan.png" class="g-lottery-img"></div>
        <div class="zhizhen"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/zhizhen.png">
            <div id="cishu-text">点击开始<br><span id="cishu">0</span>次</div>
        </div>
    </div>
    <div class="jl">
        <p><span id="zjjl">《中奖纪录》</span>|<span id="look-gz">《查看规则》</span></p>
    </div>
    <div class="gdbox"><strong>中奖用户</strong>
        <p id="tit"><span>手机号</span><span>获得奖励</span></p>
        <div class="zhongj-bbk">
            <div class="zhongj-bb">
                <div class="zhongj-bbl" id="colee" style="overflow:hidden;">
                    <div id="colee1"></div>
                    <div id="colee2"></div>
                </div>
                <div class="zhongj-bbr" id="coleer" style="overflow:hidden;">
                    <div id="coleer1"></div>
                    <div id="coleer2"></div>
                </div>
            </div>
        </div>
    </div>
    <!--遮罩&弹框-->
    <div class="zz"></div>
    <!--超级返现规则-->
    <div class="cjfx"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/close.png" class="cjgz-c"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/cjgz.png" id="cjgz-img"></div>
    <!--转盘规则-->
    <div class="zpgz"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/close.png" class="cjgz-c"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/zpgz.png" id="cjgz-img"></div>
    <!--中奖纪录-->
    <div class="zj"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/close.png" class="cjgz-c"><img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2/zjjl-img.png" id="cjgz-img">
        <div class="zj-content">
            <p><span id="mytime">时间</span><span id="myjl">获得奖励</span></p>
            <ul>
                <li><span>2017.10.31</span><span.........完整代码请登录后点击上方下载按钮下载查看