jquery实现手机端大转盘抽奖代码
代码语言:html
所属分类:大转盘
代码描述: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