jquery实现移动端手机端简易大转盘效果代码-html代码-BFW代码库

代码语言：html

所属分类：大转盘

代码描述：jquery实现移动端手机端简易大转盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
    html,body,div,img,a{
	margin:0;
	padding:0;
	font:normal normal 300 16px/1.5 "微软雅黑",arial,verdana;
}
.btn,.btn:hover.btn:visited{
	color:#ffffff;
	background-color:#fd5b78;
	margin:10px auto;
	display:block;
	text-align: center;
	width:240px;
	height:40px;
	line-height:40px;
	border:1px solid #DE3163;
	border-radius:4px;
	cursor:pointer;
}
.btn:active{
	background-color:#e46084;
}
.btn1,.btn1:hover.btn1:visited{
	color:#ffffff;
	background-color:#008573;
	margin:10px auto;
	display:block;
	text-align: center;
	width:240px;
	height:40px;
	line-height:40px;
	border:1px solid #00755E;
	border-radius:4px;
	cursor:pointer;
}
.btn1:active{
	background-color:#00755E;
}
.rotate_wrap{
	width: 90%;
	max-width: 300px;
	height: 300px;
	margin: 20px auto 50px;
	position:relative;
}
.bg_img{
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
.cont_img{
	width: 31px;
	position: absolute;
	top: 72px;
	left:135px;
}
.rotate_origin{
	transform-origin: 50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
}
.rotate_origin1{
	transform-origin: 50% 85%;
	-ms-transform-origin:50% 85%;
	-webkit-transform-origin:50% 85%;
	-moz-transform-origin:50% 85%;
	-o-transform-origin:50% 85%;
}
.overfloat{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(1,1,1,0.5);
	z-index:9;
	display:none;
}
.overfloat_cont{
	position:fixed;
	top:50%;
	left:50%;
	width:318px;
	height:160px;
	margin-left:-159px;
	margin-top:-80px;
	border-radius: 4px;
	text-align:center;
	font-size:20px;
	color:#000000;
	line-height:30px;
	background-color:#ffffff;
}
.top_space{
	display:block;
	margin-top:20px;
}
.font_red{
	color:#fd5b78;
}
.ajax_hide{
	height:0;
	width:0;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
}
.banner_wrap{
	position:fixed;
	font-size:0;
	bottom:0;
	left:0;
	width:100%;
}
.banner_wrap img{
	width:100%;
}
</style>
</head>
<body>
	<div class="rotate_wrap">
		<img class="bg_img rotate_origin" id="i_bg" src="//repo.bfw.wiki/bfwrepo/image/60d1d44f2e053.png">
		<img class="cont_img rotate_origin1" id="i_cont" src="//repo.bfw.wiki/bfwrepo/image/60d1d45eb8e76.png">
	</div>
	<div class="btn" id="i_btn">开始</div>
	<div class="btn1" id="i_back">退出</div>
	<div class="overfloat" id="i_close_cont">
		<div class="overfloat_cont">
			<strong class="top_space">提交成功</strong>
			<div><span id="i_time" class="font_red">5s</span> 后自动返回微信。</div>
			<div id="i_close" class="btn">立即返回</div>
		</div>
	</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		// 转盘样式，a：旋转角度，p：概率（1代表100%），t：需要显示的其它信息（文案or分享）
		var result_angle = [{a:0,p:0.1,t:'桃花朵朵开^_^'},{a:45,p:0.1,t:'哎呦，不错哦^_^'},{a:90,p:0.1,t:'天天开心呢^_^'},{a:135,p:0.3,t:'给姐笑一个^_^'},{a:180,p:0.1,t:'今天天气不错^_^'},{a:225,p:0.1,t:'心情大好哈哈^_^'},{a:270,p:0.1,t:'中奖五百万^_^'},{a:315,p:0.1,t:'打架你赢了^_^'}];
		var rotate = {
			rotate_angle : 0, //起始位置为0
			flag_click : true, //转盘转动过程中不可再次触发
			calculate_result:function(type,during_time){//type:0,箭头转动,1,背景转动;during_time:持续时间(s)
				var self = this;
				type = type || 0; // .........完整代码请登录后点击上方下载按钮下载查看