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%;
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0