jquery.rotate实现手机端中秋幸运大转盘抽奖活动效果代码

代码语言:html

所属分类:大转盘

代码描述:jquery.rotate实现手机端中秋幸运大转盘抽奖活动效果代码,包含中奖纪录及查看规则,分享好友、中奖名单滚动等效果

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

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

<!DOCTYPE html>
<html>

<head>
   
<meta charset="utf-8">
   
<title>jquery.rotate手机端抽奖转盘专题页面</title>
   
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   
<meta name="apple-mobile-web-app-capable" content="yes">
   
<meta name="apple-mobile-web-app-status-bar-style" content="black">
   
<meta name="format-detection" content="telephone=no">
   
<meta name="description" content="">
   
<meta name="keywords" content="">
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/liMarquee.css">

   
<style>
        .str_wrap { overflow:hidden; width:100%; font-size:12px; line-height:16px; position:relative; -moz-user-select: none; -khtml-user-select: none; user-select: none;   background:#f6f6f6; white-space:nowrap; }
   
    .str_wrap.str_active { background:#f1f1f1; }
    .str_move {  white-space:nowrap; position:absolute;  top:0;  left:0; cursor:move; }
    .str_move_clone { display:inline-block; vertical-align:top; position:absolute;  left:100%; top:0; }
    .str_vertical .str_move_clone { left:0; top:100%; }
    .str_down .str_move_clone { left:0; bottom:100%; }
    .str_vertical .str_move,
    .str_down .str_move { white-space:normal; width:100%; right: 0; margin: 0 auto; }
    .str_static .str_move,
    .no_drag .str_move,
    .noStop .str_move{ cursor:inherit; }
    .str_wrap img { max-width:none !important;   }
    .Winners-box,.str_wrap { overflow: hidden;  height: 100px; background: #1b9380; width:94%; margin: 10px auto; border-radius: 6px; }
   
    .Winners-box h1 { text-align: center; font-size: 1.4rem; color: #fff; margin: 10px 0; }
    .str_move.str_origin a { display: block; width: 100%; overflow: hidden; color: #fff; margin: 10px 0; }
    .str_move.str_origin a span { float: right; }
   
            html,body {
                font-size:18px;
                font-family:PingFang-Medium,PingFangSC-Regular,Heiti,Heiti SC,DroidSans,DroidSansFallback,"Microsoft YaHei",sans-serif;
                -webkit-font-smoothing:antialiased
            }
            body,ul,li,p,h2,img,div {
                margin:0;
                padding:0;
                border:0;
                list-style:none;
                font-weight:normal
            }
            body {
                background:#f3f3f3;
                color:#333;
                margin:0 auto;
                font-size:18px;
                font-weight:normal;
                line-height:normal;
            }
            a,a:link {
                color:#232326;
                text-decoration:none
            }
            a:active,a:hover {
                text-decoration:none
            }
            * {
                -webkit-appearance:none;
                -webkit-tap-highlight-color:rgba(255,255,255,0)
            }
            em {
                font-style:normal
            }
           
            @media only screen and (max-width:310px) and (min-width:300px) {
                html {
                font-size:9px
            }
            }@media only screen and (max-width:320px) and (min-width:310px) {
                html {
                font-size:9px
            }
            }@media only screen and (max-width:360px) and (min-width:320px) {
                html {
                font-size:9px
            }
            }@media only screen and (max-width:360px) and (min-width:350px) {
                html {
                font-size:10px
            }
            }@media only screen and (max-width:480px) and (min-width:360px) {
                html {
                font-size:10px
            }
            }@media only screen and (max-width:480px) and (min-width:470px) {
                html {
                font-size:13.33333px
            }
            }@media only screen and (max-width:560px) and (min-width:480px) {
                html {
                font-size:13.33333px
            }
            }@media only screen and (max-width:570px) and (min-width:560px) {
                html {
                font-size:15.83333px
            }
            }@media only screen and (max-width:640px) and (min-width:570px) {
                html {
                font-size:15.83333px
            }
            }@media only screen and (max-width:640px) and (min-width:630px) {
                html {
                font-size:17.77778px
            }
            }@media only screen and (max-width:710px) and (min-width:640px) {
                html {
                font-size:17.77778px
            }
            }/*��ֹ����*/
            html {
                -webkit-touch-callout:none;
                -webkit-user-select:none;
                -khtml-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
           
            html,body {
                overflow-x:hidden;
                max-width:100%;
                min-width:320px;
                min-height:100vh
            }
            a:focus,a:hover {
                color:#333
            }
            .img {
                width:100%;
                height:auto;
                display:block
            }
           
           
            ::-webkit-scrollbar {
           
            display:none;
            }
           
            .box-body {
                background:#62c7b7;
            }
            .record-txt a {
                display:block;
                color:#fff;
            }
            .record-txt {
                position:absolute;
                top.........完整代码请登录后点击上方下载按钮下载查看

网友评论0