<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>大转盘客户端</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<script type="text/javascript" src="{$JS_PATH}/jquery-1.7.2.min.js"></script>
{literal}
<style>
body {
background: #f06060;
color: #fff;
}
.turn-prizes *{
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.turn-prizes{width:100%;height:100%;}
.turn-pointer{width:130px;height:130px;border-radius:130px;background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -65px;z-index:100}
.prizes-detail{
border-radius: 50%;
pointer-events: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
width: 360px;
height: 360px;
overflow: hidden;
position: fixed;
z-index: 10;
left: 50%;
margin-left: -180px;
top: 50%;
margin-top: -180px;
}
.prizes-detail li{position: absolute;
width: 180px;
height: 180px;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-left: -180px;
}
.turn-prizes li a{
display: block;
font-size: 1.18em;
height: 400px;
width: 400px;
position: absolute;
position: fixed;
bottom: -200px;
right: -200px;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 60px;
text-align: center;
-webkit-backface-visibility: hidden;
}
.turn-prizes li:nth-child(odd) a {
background-color: hsla(0, 88%, 63%, 1);
}
.turn-prizes li:nth-child(even) a {
background-color: hsla(0, 88%, 65%, 1);
}
/*li a 的值 skew值为-(90-圆心角) rotate值为-(90-（圆心角/2） )
li的值 skew的值为(90-圆心角) rotate的值为圆心角*i
* */
/*设置五个奖项时*/
.five-prizes li a{
-webkit-transform: skew(-30deg) rotate(-60deg) scale(1);
-ms-transform: skew(-30deg) rotate(-60deg) scale(1);
-moz-transform: skew(-30deg) rotate(-60deg) scale(1);
transform: skew(-30deg) rotate(-60deg) scale(1);
}
.five-prizes li:first-child {
-webkit-transform: rotate(0deg) skew(30deg);
-ms-transform: rotate(0deg) skew(30deg);
-moz-transform: rotate(0deg) skew(30deg);
transform: rotate(0deg) skew(30deg);
}
.five-prizes li:nth-child(2) {
-webkit-transform: rotate(60deg) skew(30deg);
-ms-transform: rotate(60deg) skew(30deg);
-moz-transform: rotate(60deg) skew(30deg);
transform: rotate(60deg) skew(30deg);
}
.five-prizes li:nth-child(3) {
-webkit-transform: rotate(120deg) skew(30deg);
-ms-transform: rotate(120deg) skew(30deg);
-moz-transform: rotate(120deg) skew(30deg);
transform: rotate(120deg) skew(30deg);
}
.five-prizes li:nth-child(4) {
-webkit-transform: rotate(180deg) skew(30deg);
-ms-transform: rotate(180deg) skew(30deg);
-moz-transform: rotate(180deg) skew(30deg);
transform: rotate(180deg) skew(30deg);
}
.five-prizes li:nth-child(5) {
-webkit-transform: rotate(240deg) skew(30deg);
-ms-transform: rotate(240deg) skew(30deg);
-moz-transform: rotate(240deg) skew(30deg);
transform: rotate(240deg) skew(30deg);
}
.five-prizes li:nth-child(6) {
-webkit-transform: rotate(300deg) skew(30deg);
-ms-transform: rotate(300deg) skew(30deg);
-moz-transform: rotate(300deg) skew(30deg);
transform: rotate(300deg) skew(30deg);
}
</style>
<script>
//js可以简要计算
/* $(document).ready(function(){
$("button").click(function(){
var num = parseInt($("button").text())+1,
central = 360/num,
askew = -(90-central),
arotate = -(90-central/2),
liskew = 90-central;
alert("askew"+askew+"arotate"+arotate+"liskew"+liskew); */
/* 设css样式 */
//$(".prizes-detail li a").css({"-webkit-transform":"skew("+askew+"deg) rotate("+arotate+"deg) scale(1)"}); //重要
/* $(".prizes-detail li").each(function(key,val){
var lirotate = central*key;
$(this).css("-webkit-transform","rotate("+lirotate+"deg) skew("+liskew+"deg)"); //重要（要写兼容性）
}) */
/* 当num为3时，圆心角大于90度,这些值需要重新设 */
/* if(num == 3){
$(".prizes-detail li").css({"width":"280px","height":"280px","margin-left":"-280px","margin-top":"-90px",});
} */
/* })
}) */
</script>
{/literal}
</head>
<body>
<div class="turn-prizes">
<button style="width:50px;height:30px;margin:20px;">5</button>
<div class="turn-pointer"><img src=""></div>
<!-- <div class="prizes-detail"> //用js代码统计计算角度
<ul>
<li><a href="javascript:void(0)">一等奖</a></li>
<li><a href="javascript:void(0)">二等奖</a></li>
<li><a href="javascript:void(0)">三等奖</a></li>
<li><a href="javascript:void(0)">四等奖</a></li>
<li><a href="javascript:void(0)">五等奖</a></li>
<li><a href="javascript:void(0)">六等奖</a></li>
<li><a href="javascript:void(0)">未中奖</a></li>
</ul>
</div> -->
<div class="prizes-detail five-prizes" id="five-prizes">
<ul>
<li><a href="javascript:void(0)">一等奖</a></li>
<li><a href="javascript:void(0)">二等奖</a></li>
<li><a href="javascript:void(0)">三等奖</a></li>
<li><a href="javascript:void(0)">四等奖</a></li>
<li><a href="javascript:void(0)">五等奖</a></li>
<li><a href="javascript:void(0)">未中奖</a></li>
</ul>
</div>
</div>
</body>
</html>
原型导航应用于大转盘抽奖客户端显示页面实例