转盘抽奖（支持IE6）

最新推荐文章于 2025-07-17 09:01:58 发布

原创最新推荐文章于 2025-07-17 09:01:58 发布 · 285 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #转盘抽奖 #ie 6

javascript 同时被 2 个专栏收录

40 篇文章

订阅专栏

html+css

13 篇文章

订阅专栏

本文介绍如何使用JavaScript编写一个支持IE6浏览器的转盘抽奖功能，包括HTML结构和JavaScript实现细节，帮助开发者解决老版本浏览器的兼容性问题。

html 代码：

<!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  class="rotate">
			<img src="images/turntable.png" id='rotate'>
		</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.youkuaiyun.com/download/second_boy/10217525