昨天写了js九宫格抽奖demo,今天试着写一下js转盘抽奖(奖品内容转动)。
思路:我们先分析一下,转盘转动其实和九宫格转动没太大区别,不过九宫格转动是按顺序改变不同单元格的样式,而转盘则是改变转动角度,这里要使用CSS3中的transform属性,改变rotate()中的角度参数,在这里要特别注意一点:那就是每次改变其实是从最原始的位置做变动,角度的计算要按照最初计算,而不是从你上一步点击按钮的位置进行计算角度,代码中的偏移量不是表示和上一次操作的偏移,而是和原始位置的偏移,比如当前2号位置是被指针正对着的,下次转动如果是转到3号位置,要计算的是原始图中3号位置与1号位置的偏移度数,而不是与2号位置的偏移度数。整个js代码最重要的就是这一部分了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#menu{
width:400px;
height:400px;
background-color:#999;
border-radius:200px;
background-image:url(t.png);
}
#point{
position:absolute;
width:200px;
height:200px;
left:100px;
top:100px;
border-radius:100px;
background-image:url(get.png);
cursor:pointer;
transition: transform 2s;
}
</style>
</head>
<body>
<div id="menu">
</div>
<div id="point">
<h1 style="padding-top:60px;padding-left:80px;">GO</h1>
</div>
<script src="../九宫格抽奖/jquery-1.11.2.js"></script>
<script>
$(function(e){
var firstDeg=0;//表示最终停留数字偏移的角度
var targetDeg=-1;//表示最终停留的数字
var job=null;
var l=0;//用于计算转盘转过的角度数
$("#point").click(function(e){
l=0;
targetDeg=Math.floor(Math.random()*4+1);
firstDeg=360-90*(targetDeg-1);
job=setTimeout(runR,100);
});
function runR(){
if(l>=360*9+firstDeg)//当到达目标位置后,停止下来
{
$("#menu").css("transform","rotate("+firstDeg+"deg)");
clearTimeout(job);
return;
}
l=l+18;
$("#menu").css("transform","rotate("+l+"deg)");//按照固定累加角度转动
if(l>360*8+firstDeg||l<360)//设置不同转速
{
job=setTimeout(runR,100);
}
else
{
job=setTimeout(runR,10);
}
}
});
</script>
</body>
</html>
一下是测试时用的图