<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>大转盘</title>

<style>

	*{padding:0;margin:0}

	body{

		text-align:center

	}

	.ly-plate{

		position:relative;

		width:480px;

		height:480px;

		margin: 50px auto;

	}

	.rotate-bg{

		width:480px;

		height:480px;

		background:url(wheel.png);

		position:absolute;

		top:0;

		left:0

	}

	.ly-plate div.lottery-star{

		width:112px;

		height:142px;

		position:absolute;

		top:166px;

		left:184px;

		/*text-indent:-999em;

		overflow:hidden;

		background:url(rotate-static.png);

		-webkit-transform:rotate(0deg);*/

		outline:none

	}

	.ly-plate div.lottery-star #lotteryBtn{

		cursor: pointer;

		position: absolute;

		top:0;

		left:0;

		*left:-107px

	}

</style>

</head>

<body>

	<div class="ly-plate">

		<div class="rotate-bg" id="lotteryBtn"></div>

		<div class="lottery-star" id="wheel"><img src="wheel_1.png" ></div>

	</div>

</body>

<script src="jquery-1.7.2.min.js"></script>

<script src="jQueryRotate.2.2.js"></script>

<script src="jquery.easing.min.js"></script>

<script>

$(function(){

	var timeOut = function(){  //超时函数

		$("#lotteryBtn").rotate({

			angle:0,

			duration: 10000,

			animateTo: 3600, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的

			callback:function(){

				alert('网络超时')

			}

		});

	};

	var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度

		$('#lotteryBtn').stopRotate();

		$("#lotteryBtn").rotate({

			angle:0,

			duration: 6000,

			animateTo: angle+3600, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^

			callback:function(){

				alert(text)

			}

		});

	};

	$("#wheel").rotate({

	   bind:

		 {

			click: function(){

				var time = [0,1];

					time = time[Math.floor(Math.random()*time.length)];

					alert(time);

				if(time==0){

					timeOut(); //网络超时

				}

				if(time==1){

					var data = [1,2,3,0]; //返回的数组

						data = data[Math.floor(Math.random()*data.length)];

						alert(data);

					if(data==1){

						rotateFunc(1,1,'恭喜您抽中的一等奖')

					}

					if(data==2){

						rotateFunc(2,60,'恭喜您抽中的二等奖')

					}

					if(data==3){

						rotateFunc(3,120,'恭喜您抽中的三等奖')

					}

					if(data==0){

						var angle = [30,90,150,210,270,330];

							angle = angle[Math.floor(Math.random()*angle.length)]

						rotateFunc(0,angle,'很遗憾，这次您未中奖')

					}

				}

			}

		 } 

	});

})

</script>

</html>

大转盘Demo的更多相关文章

  1. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  2. 纯CSS3大转盘抽奖（响应式、可配置）

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  3. php 大转盘抽奖

    包在文件中 lottery.zip <!DOCTYPE HTML><html><head><meta charset="utf-8"> ...

  4. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  5. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  6. 微信小程序独家秘笈之抽奖大转盘

    代码地址如下:http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. Java 实现大转盘抽奖

    需要用到 JAVA中的Random()函数 注意:大转盘抽奖各奖项中奖概率之和为 1.奖品列表中的概率为累加概率,需要按照添加进列表的顺序进行累加,添加顺序不做要求. 实际中使用需要考虑奖品数量限制等 ...

  8. iOS大转盘抽奖

    功能 点击大转盘旋转后固定到某个自己可以确定的位置 结构 转盘,开始按钮,指针 技术 CADisplayLink不停重绘,CGAffineTransform旋转,简单数学公式 核心代码 1.使用CAD ...

  9. 利用jQueryRotate旋转插件开发大转盘抽奖

    前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...

随机推荐

  1. Hibernate学习笔记--使用ThreadLocal

    参考资料: http://blog.sina.com.cn/s/blog_7ffb8dd5010146i3.html http://lavasoft.blog.51cto.com/62575/5192 ...

  2. python 3.5 格式化字符串输出

    #!/usr/bin/env python #encoding: utf-8 #.strip('里面可以去掉字符串中两边的字符') name = input('name :').strip(' ') ...

  3. 基于JDK6的JAX-WX为客户端提供XML与JSON格式数据服务，以及客户端采用AXIS调用案例

    1:WebService服务端工程目录如下: 需要第三方jar包:gson-2.2.4.jar\javax.xml.bind.jar\commons-lang-2.5.jar 源码如下: packag ...

  4. Codeforces 351B Jeff and Furik

    http://codeforces.com/problemset/problem/351/B 题意:两个人轮流游戏,先手交换相邻两个数,后手先抛硬币,正面就左大右小换,反面就右大左小换,随机找到一对数 ...

  5. Linux企业级项目实践之网络爬虫（6）——将程序设计成为守护进程

    在linux或者unix操作系统中在系统的引导的时候会开启很多服务,这些服务就叫做守护进程.为了增加灵活性,root可以选择系统开启的模式,这些模式叫做运行级别,每一种运行级别以一定的方式配置系统. ...

  6. 算法导论（第三版）习题Exercises4.3（第四章三节）算法导论的一个印刷错误

    本节系列证明都可见4.5节需要说明的有4.3-8,4.3-9两题 4.3-8(本题有误) T(n)=4T(n/2)+n2根据4.5理论,结果为Θ(n2lgn) 4.3-9 m = lgn T(2m) ...

  7. 升级 pip版本

    安装第三方库:pip install Pillow 出现 You are using pip version 7.1.2, however version 9.0.1 is available. Yo ...

  8. 原生javascript 获得css样式有几种方法？

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  9. Laravel-表单篇-controller

    (慕课网_轻松学会Laravel-表单篇_天秤vs永恒老师_http://www.imooc.com/learn/699) Controller 1.Controller-Request //Requ ...

  10. JavaScript学习总结（二）

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...