jquery实现手机端大转盘抽奖代码

代码语言:html

所属分类:大转盘

代码描述:jquery实现手机端大转盘抽奖代码

代码标签: jquery 手机端 大转盘 抽奖 代码

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

<!DOCTYPE html>
<html>

<head>
   
<meta charset="UTF-8">


   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
   
<style>
        body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {
                margin:0;
                padding:0;
                border:0;
        }
        body {
                color:#333;
                font-size:12px;
                font-family:"Microsoft YaHei"
        }
        ul,ol {
                list-style-type:none;
        }
        select,input,img,select {
                vertical-align:middle;
        }
        input {
                font-size:12px;
        }
        a {
                text-decoration:none;
                color:#000;
        }
        a:hover {
                color:#c00;
                text-decoration:none;
        }
        .clear {
                clear:both;
        }
        /*==== 弹窗 =====*/.cover {
                z-index:99;
                position:fixed;
                top:0;
                background:rgba(39,40,34,.6);
        }
        .covers1,.covers2,.covers3 {
                z-index:101;
                position:fixed;
                left:0;
                right:0;
                top:0;
                bottom:0;
                width:70%;
                height:65vw;
                background:white;
                margin:auto;
                border-radius:7px;
                animation:action_translateY 1s linear;
                /*display:none;
                */
        }
        .covers_quit {
                position:absolute;
                right:5vw;
                top:5vw;
                width:5%;
        }
        .covers_quit img {
                width:100%;
        }
        .covers_icon {
                width:46%;
                margin-left:27%;
                margin-top:8vw;
        }
        .covers_icon img {
                width:100%;
        }
        .covers_font {
                font-size:4vw;
                text-align:center;
        }
        .covers_font span {
                color:#EA2329;
        }
        .covers_btn,.covers_btn2 {
                width:86%;
                margin-left:7%;
                margin-top:7vw;
                height:10vw;
                line-height:10vw;
                color:white;
                font-size:4.2vw;
                text-align:center;
                background:#F44336;
                border-radius:90px;
        }
        .covers2,.covers3 {
                width:80%;
                height:85vw;
                display:none;
        }
        .covers_btn1,.covers_btn2 {
                /*height:12vw;
                line-height:12vw;
                */              margin-top:4vw;
                width:70%;
                margin-left:15%;
        }
        .covers_btn1 {
                margin-top:10vw;
        }
        .covers_btn2 {
                background:#4296EB;
        }
        /*收益跳转*/.float_btn {
                z-index:20;
                position:fixed;
                top:10vw;
                right:0vw;
                width:20vw;
                height:8vw;
                border-radius:90px 0 0 90px;
                text-align:center;
                line-height:8vw;
                color:white;
                font-size:3.7vw;
                background:#B71C1C;
        }
        /*==== 转盘抽奖 ====*/.turntable {
                position:relative;
                width:100%;
                height:auto;
        }
        .turntable .turntablebg {
                width:100%;
        }
        .rotate {
                z-index:10;
                position:absolute;
                width:70%;
                left:15%;
                top:25vw;
        }
        .pointer {
                z-index:15;
                position:absolute;
                width:20%;
                left:40%;
                top:41vw;
        }
        .rotate img,.pointer img {
                width:100%;
        }
        .turntable_font {
                position:absolute;
                width:90%;
                height:9vw;
                bottom:4vw;
                left:5%;
                line-height:9vw;
        }
        .turn_font_left,.turn_font_right {
                float:left;
                width:47%;
                height:100%;
                background:#D50000;
                border-radius:90px;
                color:white;
                font-size:3.5vw;
        }
        .turn_font_right {
                float:right;
        }
        .turn_font_left img {
                width:16%;
                margin-top:-1.5%;
                margin-left:5%;
        }
        .turn_font_right img {
                width:14%;
                margin-top:-2%;
                margin-left:5%;
                margin-right:5%;
        }
        /*==== task =====*/.taskRules {
                position:relative;
                width:100%;
                background:#EB2A30;
                padding-bottom:10vw;
                padding-top:1vw;
        }
        .task {
                width:90%;
                height:104vw;
                background:white;
                border-radius:10px;
                margin-left:5%;
        }
        .task_title {
                width:90%;
                height:13vw;
                margin-left:5%;
                text-align:center;
                border-bottom:1px solid #EDEDED;
        }
        .task_title img {
                width:70%;
                margin-top:5.5%;
        }
        .task_read,.task_video {
                width:90%;
                height:35vw;
                margin-left:5%;
                border-bottom:1px solid #EDEDED;
        }
        .task_r_name {
                padding-top:3vw;
                font-size:4.2vw;
                font-weight:bold;
        }
        .task_con {
                position:relative;
                top:3vw;
                width:90%;
                margin-left:7%;
                height:18vw;
                /*background:red;
                */
        }
        .task_con_icon {
                position:relative;
                top:5vw;
                width:100%;
                height:6.5vw;
        }
        .task_con_icon img {
                width:100%;
        }
        .task_icon1 {
                position:relative;
                float:left;
                width:8.5%;
                margin-left:14%;
        }
        .task_line {
                float:left;
                width:47%;
                height:1px;
                margin:4% 3%;
                background:#F4908F;
        }
        .task_icon2 {
                position:relative;
                float:left;
                width:8.5%;
        }
        .task_fonts {
                position:relative;
                top:7vw;
                width:100%;
                height:6vw;
                line-height:6vw;
        }
        .task_fonts_left,.task_fonts_right {
                float:left;
                width:40%;
                height:100%;
                color:#262626;
                font-size:3.5vw;
                text-align:center;
        }
        .task_fonts_right {
                float:right;
        }
        .task_video .task_line {
                background:#0DACF5;
        }
        .task_icon_already {
                position:absolute;
                top:-5vw;
                left:5vw;
                width:260%;
        }
        .task_icon_already img {
                width:100%;
        }
        .task_font_footer {
                width:90%;
                height:12vw;
                margin-left:5%;
                margin-top:3vw;
                color:#8F8F8F;
                font-size:3.5vw;
                line-height:5.5vw;
        }
        .rules {
                position:relative;
                width:90%;
                background:white;
                border-radius:10px;
                margin-left:5%;
                margin-top:10vw;
                padding-bottom:3vw;
        }
        .rules .task_title img {
                width:50%;
        }
        .rules_cover {
                z-index:10;
                position:absolute;
        }
        .rules_cover img {
                width:100%;
        }
        .rules_con {
                margin-top:3vw;
                width:90%;
                margin-left:5%;
                height:10vw;
                transition:.3s;
                font-size:3.5vw;
                line-height:5.5vw;
                overflow:hidden;
        }
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0