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;
}
.rules_footer {
z-index:15;
position:absolute;
width:100%;
height:10vw;
font-size:4.2vw;
color:#00A7F5;
/*background:red;
*/ line-height:10vw;
text-align:center;
}
.rules_li {
color:gray;
}
.rules_con li span {
color:red;
}
.rules_con_footer {
margin-top:5vw;
text-align:center;
color:gray;
}
/** 动画 **/@keyframes action_translateY {
0% {
transform:scale(.5);
opacity:0;
}
50% {
transform:scale(.8);
opacity:.6;
}
100% {
transform:scale(1);
opacity:1;
}
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/awardRotate.min.js"></script>
<script type="text/javascript">
$(function() {
$(".rules_footer").click(function() {
$(".rules_cover,.rules_footer").hide();
$(".rules_con").css("height", "95vw")
});
$(".pointer").click(function() {
c()
});
$(".covers_quit").click(function() {
$(".cover").fadeOut(500);
$(this).parent().fadeOut(500)
});
function b() {
var g = $(window).height(),
h = $(window).width();
$(".cover").css({
width: h,
height: g
});
$(".covers_btn").click(function() {
$(".cover").hide();
$(this).parent().hide();
c()
});
$(".covers_btn2").click(function() {
$(".cover").hide();
$(this).parent().parent().hide();
$(".rules_cover,.rules_footer").hide();
$(".rules_con").css("height", "95vw")
})
}
b();
var e = function() {
$("#rotate").rotate({
angle: 0,
animateTo: 2160,
duration: 8000,
callback: function() {
alert("网络超时，请检查您的网络设置！")
}
})
};
var a = false;
var d = function(h, g, i) {
a = !a;
$("#rotate").stopRotate();
$("#rotate").rotate({
angle: 0,
animateTo: g + 2825,
duration: 8000,
callback: function() {
$(".cover,.covers2").show();
$(".covers2 .covers_font span").text(i);
a = !a
}
})
};
var f = 2;
function c() {
if (a) {
return
}
f--;
if (f <= 0) {
console.log("covers3");
$(".cover,.covers3").show()
} else {
var g = 3;
switch (g) {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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