原型导航应用于大转盘抽奖客户端显示页面实例
<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
* */
.one-prizes li a{
-webkit-transform: rotate(90deg) scale(1);
-ms-transform: rotate(90deg) scale(1);
-moz-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
right:-20px;bottom:-20px;
}
.one-prizes li:first-child {
-webkit-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform: rotate(-90deg);
margin-top:-360px;
margin-left:0px;
}
.one-prizes li:nth-child(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
margin-top:0px;margin-left:-360px;
}
/* 左右分
* .one-prizes li a{
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
right:-20px;
}
.one-prizes li:first-child {
-webkit-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform: rotate(-90deg);
margin-top:-180px;
}
.one-prizes li:nth-child(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
margin-top:180px;
} */
</style>
{/literal}
</head>
<body>
<div class="turn-prizes">
<button style="width:50px;height:30px;margin:20px;">6</button>
<div class="turn-pointer"><img src=""></div>
<div class="prizes-detail">
<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 one-prizes" id="one-prizes">
<ul>
<li><a href="javascript:void(0)">一等奖</a></li>
<li><a href="javascript:void(0)">未中奖</a></li>
</ul>
</div> -->
</div>
{literal}
<script type="text/javascript">
//var num = parseInt($("button").text())+1,
var num = 7,
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)"
,"-moz-transform":"skew("+askew+"deg) rotate("+arotate+"deg) scale(1)"
,"-o-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)"
,"-moz-transform":"rotate("+lirotate+"deg) skew("+liskew+"deg)"
,"-o-transform":"rotate("+lirotate+"deg) skew("+liskew+"deg)"});
})
/* 当num为3时，圆心角大于90度,这些值需要重新设 */
if(num == 3){
$(".prizes-detail li").attr({"width":"280px","height":"280px","margin-left":"-280px","margin-top":"-90px",});
}
/* 左右分 */
/* if(num == 2){
$(".prizes-detail li").css({"width":"360px","height":"180px","margin-left":"-360px"});
} */
if(num == 2){
$(".prizes-detail").addClass("one-prizes");
$(".prizes-detail li").css({"width":"180px","height":"360px"});
}
</script>
{/literal}
</body>
</html>
