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

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

代码语言：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/60d1d45.........完整代码请登录后点击上方下载按钮下载查看