抽奖转盘

这是从网上找到的一个抽奖的例子，需要用到一个插件awardRotate.js，这在我的另一篇随笔中可以找到，具体步骤如下：

1、引入jquery.js、awardRotate.js以及你自己编写的index.js

2、布局index.html

<body>
    <div class="turntable-bg">
        <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
        <div class="rotate">
        	<img src="images/img1.png" width="450px" alt="" id="rotate" />
        </div>
    </div>
</body>

3、样式

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}


.turntable-bg {
	width:531px;
	margin:40px auto 0 auto;
	height:531px;
	position:relative;
	background:url("../images/turntable-bg2.png");
}
.turntable-bg .mask {
	width:454px;
	height:451px;
	position:absolute;
	left:116px;
	top:60px;
}
.turntable-bg .pointer {
	width:174px;
	height:228px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-94px;
	margin-top:-130px;
	z-index:8;
}
.turntable-bg .rotate {
	width:450px;
	height:450px;
	position:absolute;
	left:40px;
	top:38px;
}

　　4、js文件编写

<script type="text/javascript">
$(function (){

	var rotateTimeOut = function (){
		$('#rotate').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};
	var bRotate = false;

	var rotateFn = function (awards, angles, txt){
		bRotate = !bRotate;
		$('#rotate').stopRotate();
		$('#rotate').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:3000,
			callback:function (){
				alert(txt);
				bRotate = !bRotate;
			}
		})
	};

	$('.pointer').click(function (){

		if(bRotate)return;

		// var item = rnd(0,7); 随机抽中XXX
    
		var item = 7;  // 指定抽中某个奖项

		switch (item) {
			case 0:
				rotateFn(0, 0, '0');
				break;
			case 1:
				rotateFn(1, 45, '1');
				break;
			case 2:
				rotateFn(2, 90, '2');
				break;
			case 3:
				rotateFn(3, 135, '3');
				break;
			case 4:
				rotateFn(4, 180, '4');
				break;
			case 5:
				rotateFn(5, 225, '5');
				break;
			case 6:
				rotateFn(6, 270, '6');
				break;
			case 7:
				rotateFn(6, 315, '7');
				break;
		}

		console.log(item);
	});
});

// 注意这里的rnd是随机抽奖，8个奖项是随机抽中的，但是这个是可有可无的，如果你想随机抽中那么加上这个函数；否则直接删了就行
function rnd(n, m){
	return Math.floor(Math.random()*(m-n+1)+n)
}
</script>

　　注意：上面的var item = 7;这是指定用户抽中的奖项，可以有后台传给你

posted @ 2017-12-05 17:10  carrie_zhao  阅读(474)  评论(0)    收藏  举报