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