转盘抽奖

最新推荐文章于 2024-01-22 18:42:55 发布

碵蝎

最新推荐文章于 2024-01-22 18:42:55 发布

阅读量418

点赞数

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/52225527

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<title>转盘抽奖demo</title>	
<style>
	
	*{margin: 0; padding: 0; overflow: hidden;}
	
	/*抽奖*/
	.turntable_bg {width: 480px;height: 482px; position: relative ;}
	.turntable_bg .pointer {width: 174px;height: 228px;position: absolute; left: 50%;top: 50%; margin-left: -78px; margin-top: -100px;z-index: 99;}
	.turntable_bg .rotate{width: 480px; height: 482px; position: absolute; left: 0; top: 0px;}

</style>
</head>
<body>
	<div class="turntable_bg"> 
		<div id='pointer' class="pointer">
			<img src="images/pointer.png"/>
		</div>
		<div id='rotate' class="rotate">
			<img src="images/turntable.png">
		</div>
	</div>
</body>
<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script>

//奖品角度、奖品列表
var list = [
	[0, '50元礼包'],
	[60, '100元礼包'],
	[120, 'faker签名照'],
	[180, '多谢参与'],
	[240, '5元礼包'],
	[300, '10元礼包']
];

//抽奖停止的位置
var idx = 0;

var flag = false;

//抽奖函数
function prizedraw(angles, txt)
{
	if (flag) {return;}
	flag = true;
	$('#rotate').stopRotate();
	$('#rotate').rotate({
		angle:0, //重置需要用到，不能去掉，否则转盘只能转一次
		animateTo:angles+1800, //angels是转盘停止的角度，1800是让转盘转5圈(1800 / 360 = 5) 
		duration:8000, //转盘转的速度
		callback:function (){	//回调函数
			alert('你抽中了 ：' + txt);	
			flag = false;
		}
	});
} 

//点击开始抽奖的按钮
$('#pointer').click(function(){
	prizedraw(list[idx][0], list[idx][1]);
});

</script>
</html>

源码下载地址：http://download.csdn.net/detail/qq408896436/9605102

碵蝎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转盘抽奖

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="gbk"><title>转盘抽奖demo</title> <style> *{margin: 0; padding: 0; overflow: hidden;} /*抽奖*/ .t...
复制链接

扫一扫