最代码广告位
xyw10000的gravatar头像
xyw100002014-04-14 14:00:01

js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下
queryRotate 这个插件就可以实现这个功能
jqueryRotate:
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现
google code地址:http://code.google.com/p/jqueryrotate/
下面了解下这个插件怎么使用

$("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度

$("触发转动元素").getRotateAngle(); //返回对象当前的角度

$("触发转动元素").stopRotare(); //停止旋转动画

$("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。
$("触发转动元素").rotate({  
      angle:0,  //起始角度
     animateTo:180,  //结束的角度
     duration:3000, //转动时间
     callback:function(){}, //回调函数
     easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件
  })

$("触发转动元素").rotate(45); //转动45

$("触发转动元素").getRotateAngle(); //返回对象当前的角度

$("触发转动元素").stopRotare(); //停止旋转动画

另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例

一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内

二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内

三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内

 

 

下面以一个简单demo为例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="zp.js"></script>
<style type="text/css">
body {
	background: url(bg.png) 0 0 repeat;
}

.rotate-content {
	width: 270px;
	position: relative;
	height: 270px;
	background: url(activity-lottery-bg.png)
		no-repeat 0 0;
	background-size: 100% 100%;
	margin: 0 auto
}

.rotate-con-pan {
	background: url(disk.jpg)
		no-repeat 0 0;
	background-size: 100% 100%;
	position: relative;
	width: 255px;
	height: 255px;
	padding-top: 15px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0 auto
}

.rotate-con-zhen {
	width: 112px;
	height: 224px;
	background: url(start.png)
		no-repeat 0 0;
	background-size: 100% 100%;
	margin: 0 auto
}

</style>
</head>

<body>

<div class="rotate-content">
						<div class="rotate-con-pan">
							<div class="rotate-con-zhen"></div>
						</div>
					</div>
</body>
<script type="text/javascript">
$(function(){
	$(".rotate-con-zhen").rotate({
		bind:{
			click:function(){
				var a = runzp();
				 $(this).rotate({
					 	duration:3000,
					 	angle: 0, 
            			animateTo:1440+a.angle,
						easing: $.easing.easeOutSine,
						callback: function(){
							alert(a.prize+a.message);
						}
				 });
			}
		}
	});
});
</script>
</html>

zp.js

/****************************************************
 *	 Author :	xuyw			    *
 *	 Version:   v1.0		            *
 *   Email  :   xyw10000@163.com                    *
****************************************************/

function randomnum(smin, smax) {// 获取2个值之间的随机数
	var Range = smax - smin;
	var Rand = Math.random();
	return (smin + Math.round(Rand * Range));
}

function runzp() {
	var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰奖","v":48.0}]';// 奖项json
	var obj = eval('(' + data + ')');
	var result = randomnum(1, 100);
	var line = 0;
	var temp = 0;
	var returnobj = "0";
	var index = 0;

	//alert("随机数"+result);
	for ( var i = 0; i < obj.length; i++) {
		var obj2 = obj[i];
		var c = parseFloat(obj2.v);
		temp = temp + c;
		line = 100 - temp;
		if (c != 0) {
			if (result > line && result <= (line + c)) {
				index = i;
				// alert(i+"中奖"+line+"<result"+"<="+(line + c));
				returnobj = obj2;
				break;
			}
		}
	}
	var angle = 330;
	var message = "";
	var myreturn = new Object;
	if (returnobj != "0") {// 有奖
		message = "恭喜中奖了";
		var angle0 = [ 344, 373 ];
		var angle1 = [ 226, 256 ];
		var angle2 = [ 109, 136 ];
		switch (index) {
		case 0:// 一等奖
			var r0 = randomnum(angle0[0], angle0[1]);
			angle = r0;
			break;
		case 1:// 二等奖
			var r1 = randomnum(angle1[0], angle1[1]);
			angle = r1;
			break;
		case 2:// 三等奖
			var r2 = randomnum(angle2[0], angle2[1]);
			angle = r2;
			break;
		}
		myreturn.prize = returnobj.prize;
	} else {// 没有
		message = "再接再厉";
		var angle3 = [ 17, 103 ];
		var angle4 = [ 197, 220 ];
		var angle5 = [ 259, 340 ];
		var r = randomnum(3, 5);
		var angle;
		switch (r) {
		case 3:
			var r3 = randomnum(angle3[0], angle3[1]);
			angle = r3;
			break;
		case 4:
			var r4 = randomnum(angle4[0], angle4[1]);
			angle = r4;
			break;
		case 5:
			var r5 = randomnum(angle5[0], angle5[1]);
			angle = r5;
			break;
		}
		myreturn.prize = "继续努力!";

	}
	myreturn.angle = angle;
	myreturn.message = message;
	return myreturn;
}

首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发

附上我的小转盘

js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

 

js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器


最代码官方编辑于2016-4-16 16:47:08


打赏

已有1人打赏

zangxu123的gravatar头像

文件名:test.rar,文件大小:215.503K下载
  • /
      • /test
        • /test/1.html
        • /test/bg.png
        • /test/disk.jpg
        • /test/jQueryRotate.2.2.js
        • /test/jquery-1.8.0.min.js
        • /test/jquery.easing.min.js
        • /test/start.png
        • /test/zp.js
最代码最近下载分享源代码列表最近下载
trust317 LV13月4日
星星
libang LV12月14日
星星
ylx123 LV22019年12月23日
星星星星
ylj276539584 LV112019年12月7日
月亮月亮星星星星星星
slew28 LV12019年12月4日
星星
1095402829 LV182019年12月4日
太阳星星星星
木木coco LV62019年11月19日
月亮星星星星
zhanglinan1 LV12019年11月11日
星星
阿猫喵喵喵996 LV102019年9月29日
月亮月亮星星星星
419407 LV12019年9月28日
星星
最代码最近浏览分享源代码列表最近浏览
lllpppwww LV1前天
星星
w6403518 LV1前天
星星
码上斜杠 LV34月2日
星星星星星星
huashanam4月1日
暂无贡献等级
暂无贡献等级
lilaida3月29日
暂无贡献等级
Hp_Eric3月27日
暂无贡献等级
继元宝 LV93月26日
月亮月亮星星
qzlicn LV163月25日
太阳
1453433月25日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友