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