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 {
        	hei.........完整代码请登录后点击上方下载按钮下载查看