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:5%;
right:0;
z-index:9999;
font-size:1rem;
padding:8px 2%;
background:#1b9380;
border-radius:25px 0 0 25px;
}
.top-title {
padding-top:20px;
position:relative;
}
.top-title > div > img,.center-box > div > img {
width:100%;
}
.top-title .dzp-1 {
width:75%;
margin:0 auto;
}
.top-title .dzp-2 {
width:8%;
position:absolute;
top:9%;
left:9%;
}
.top-title .dzp-22 {
width:8%;
position:absolute;
top:16%;
right:7%;
}
.top-title .dzp-3 {
width:14%;
position:absolute;
bottom:5%;
left:17%;
}
.top-title .dzp-4 {
width:22%;
position:absolute;
bottom:4%;
right:4%;
}
.clear-k {
clear:both;
}
.center-box .dzp-14 {
width:75%;
position:absolute;
top:-8%;
right:0;
left:0;
margin:0 auto;
z-index:9;
}
.center-box .dzp-6 {
top:22%;
width:14%;
position:absolute;
right:7%;
}
.center-box {
position:relative;
}
.center-box > div {
position:absolute;
}
.center-box .dzp-7 {
width:12%;
top:37%;
left:6%;
}
.center-box .dzp-5 {
width:15%;
top:2%;
left:-2%;
}
.center-box .dzp-15 {
width:15%;
bottom:11%;
right:18%;
}
.center-box .dzp-8 {
bottom:23%;
right:15%;
width:6%;
}
.center-box .dzp-88 {
width:8%;
bottom:22%;
left:14%;
}
.center-box .dzp-14 > div img {
width:100%;
}
.rom {
height:98%;
/* animation:myfirst 2s infinite linear;
*/
width:100% !important;
border-radius:50%;
}
.but-a p {
font-size:1.1rem;
margin-top:15px;
color:#220f0b;
}
.but-a a {
padding:1rem 4rem;
background:#1b9380;
border-radius:6px;
color:#fff;
font-size:1.3rem;
margin-right:.8rem;
}
.but-a {
text-align:center;
margin-top:-8px;
width:96%;
margin:0 auto;
}
.center-box .dzp-14 > div {
position:absolute;
width:37%;
left:0;
top:0;
animation-iteration-count:3;
-webkit-animation-iteration-count:3;
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}
.center-box .dzp-14 > div > div {
width:35%;
position:absolute;
left:30%;
top:4%;
}/*Plugin CSS*/
.Winners-box {
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;
}
.rule-box {
width:90%;
margin:0 auto;
color:#fff;
font-size:1.3rem;
background:#1b9380;
border-radius:6px;
padding:2%;
}
.rule-box .title-radius em.right {
top:0;
right:0;
}
.rule-box .title-radius em {
position:absolute;
width:8px;
height:8px;
background:#fff;
border-radius:50%;
display:block;
}
.rule-box .title-radius {
text-align:center;
font-size:1.4rem;
position:relative;
}
.content-box p {
margin:6px 0;
font-size:1.1rem;
width:100%;
overflow:hidden;
}
.content-box h2 {
font-size:1.3rem;
text-align:center;
margin:10px 0;
}
.content-box p span {
margin-left:1%;
float:left;
width:90%;
}
.content-box p em {
float:left;
width:4%;
}
/* .share {
transition:all 0.5s;
display:flex;
bottom:-50px;
left:0;
width:100%;
margin-bottom:-50vh;
position:fixed;
padding:1rem;
border-radius:0.5rem;
background-color:#fff;
z-index:56;
font-size:1.4rem;
}
*/
.share>div {
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
margin:0 auto;
text-align:center;
}
.share-window {
position:fixed;
bottom:0;
width:100%;
background:#fff;
padding-bottom:16px;
z-index:9999;
bottom:-195px;
border-radius:6px 6px 0 0;
-webkit-transition:all .5s ease-in;
-moz-transition:all .5s ease-in;
transition:all .5s ease-in;
}
.share-window ul {
overflow:hidden;
padding:12px 0;
}
.share-window ul li {
float:left;
text-align:center;
width:25%;
}
.share-window ul li a {
display:block;
}
.share-window ul li img {
width:50%;
border-radius:50%;
}
.share-window ul li p {
margin-bottom:10px;
font-size:12px;
}
.share-window-hi {
position:fixed;
top:0;
z-index:999;
background:rgba(0,0,0,0.50);
width:100%;
height:100%;
display:none;
}
.share-title {
color:#262626;
}
.share-title p {
font-size:1.4rem;
}
.share-title h1 {
font-size:1.4rem;
margin:10px 0 4px;
}
.share-window .but-a a {
border-radius:25px;
background:#f2f2f2;
color:#262626;
}
.share-window .but-a {
width:70%;
}
.poput-lottey {
position:fixed;
top:25%;
left:0;
right:0;
width:80%;
background:#fff;
z-index:9999;
border-radius:6px;
margin:0 auto;
padding:4%;
}
.poput-lottey1 {
width:70%;
display:none;
top:35%;
}
.poput-lottey h1 {
text-align:center;
font-size:1.6rem;
margin:0 0 10px;
color:#262626;
}
.poput-lottey p {
text-align:center;
font-size:1.3rem;
color:#737373;
margin:12px 0;
}
.poput-lottey1 a,.poput-lottey3 a {
background:#62c7b7;
border-radius:6px;
font-size:1.4rem;
color:#fff;
display:block;
width:53%;
margin:12px auto 0;
text-align:center;
padding:8px 0;
}
.poput-lottey1 a:active,.poput-lottey3 a:active,.record-txt a:active {
opacity:.8;
}
.poput-lottey2,.poput-lottey3 {
display:none;
}
.poput-lottey2 img {
width:100%;
}
.poput-lottey2 .img {
width:30%;
margin:8px auto;
}
.poput-lottey2 p {
margin:10px auto;
}
.poput-lottey2 .but a:nth-child(2) {
float:right;
}
.poput-lottey2 .but a:nth-child(1) {
float:left;
margin-left:4%;
border:solid 1px #d9d9d9;
background:#fff;
color:#262626;
}
.poput-lottey2 .but a:active {
opacity:.8;
}
.poput-lottey2 .but a {
background:#62c7b7;
border-radius:6px;
font-size:1.4rem;
color:#fff;
display:block;
text-align:center;
width:35%;
padding:8px 0;
}
.poput-lottey2 .but {
overflow:hidden;
margin:12px 0 2px;
text-align:center;
}
.poput-lottey3 .img img {
width:100%;
}
.poput-lottey3 .img {
width:70%;
margin:0 auto 10px;
}
.poput-lottey3 p {
margin:-5px auto;
}
.poput-lottey3 a {
border-radius:25px;
margin:20px auto 0;
}
.Winners-box, .str_wrap {
overflow: hidden;
height: 100px;
background: #1b9380;
width: 94%;
margin: 10px auto;
border-radius: 6px;
}
.poput-lottey3 .but {
position:absolute;
bottom:-26%;
right:0;
left:0;
margin:0 auto;
text-align:center;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
</head>
<body>
<div class="box-body">
<!-- 标题 -->
<div class="top-title">
<div class="record-txt"><a href="javascript:void(0)">我的中奖记录</a></div>
<div class="dzp-1"><img src="//repo.bf.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0