jquery实现手机端大转盘抽奖代码

代码语言:html

所属分类:大转盘

代码描述:jquery实现手机端大转盘抽奖代码

代码标签: 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