<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery圆形转盘抽奖</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<style type="text/css">
/*背景*/
#lottery {
width: 450px;
height: 450px;
position: relative;
background: url("images/disc-bg.gif") no-repeat scroll 0 0 transparent;
z-index: 99991;
margin: 0px auto;
margin-top: 30px;
}
/*转盘*/
#lottery .img {
position: absolute;
left: 49px;
top: 49px;
width: 352px;
height: 352px;
z-index: 99992;
}
/*指针*/
#lottery .arrow {
width: 32px;
height: 191px;
position: absolute;
left: 209px;
top: 85px;
background: url("images/arrow.png") no-repeat scroll 0 0 transparent;
z-index: 99993;
}
/*抽奖按钮*/
#lottery .lot-btn {
width: 92px;
height: 92px;
display: block;
position: absolute;
cursor: pointer;
left: 179px;
top: 183px;
overflow: hidden;
background: url("images/buttons_01.png") no-repeat scroll 0 0 transparent;
z-index: 99994;
}
</style>
</head>
<body>
<div id="lottery">
<img src="images/disc-rotate.gif" class="img" />
<div class="arrow"></div>
<div class="lot-btn" onclick="javascript:DZP(10,6);"></div>
</div>
</body>
</html>
<script>
//先转n圈,选择m第个
function DZP(n, m) {
//停止动画
$(‘.img‘).stopRotate();
//转
$(".img").rotate({
angle: 0, //起始角度
animateTo: 360 * n + 26 + 52 * m, //结束的角度
duration: 2500, //转动时间
callback: function () {
//得到角度
var r = $(‘.img‘).getRotateAngle();
}, //回调函数
easing: $.easing.stopRotare //定义运动的效果，需要引用jquery.easing.min.js的文件
});
}
</script>
源码：pigkeli@qq.com