注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery圆盘旋转抽奖插件jQueryRotate

动画 fishcity 5913浏览

jQuery圆盘旋转抽奖

jQueryRotate是一款旋转插件,很多网站都用它来制作转盘抽奖动画,今天jQ酷也和大家说下使用jQueryRotate来制作转盘转动指针不动的抽奖动画,至于中奖概率问题这里就不涉及了,想了解的朋友百度下吧。

jquery实例jQueryRotate实现抽奖转盘动画

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="jQueryRotate.2.2.js"></script>
<script src="jquery.easing.min.js"></script>

构建html

<div class="ly-plate">
  <div class="rotate-bg"></div>
  <div class="lottery-star"><img src="rotate-static.png" id="lotteryBtn"></div>
</div>

写入CSS

.ly-plate {
	position: relative;
	width: 509px;
	height: 509px;
	margin: 50px auto;
}
.rotate-bg {
	width: 509px;
	height: 509px;
	background: url(ly-plate.png);
	position: absolute;
	top: 0;
	left: 0
}
.ly-plate div.lottery-star {
	width: 214px;
	height: 214px;
	position: absolute;
	top: 150px;
	left: 147px;
	/*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
}

写入JS实现动画

$(function(){
	var timeOut = function(){  //超时函数
		$(".rotate-bg").rotate({
			angle:0, 
			duration: 10000, 
			animateTo: 2160, //这里是设置请求超时后返回的角度,所以应该还是回到最原始的位置,2160是因为我要让它转6圈,就是360*6得来的
			callback:function(){
				alert('网络超时')
			}
		}); 
	}; 
	var rotateFunc = function(awards,angle,text){  //awards:奖项,angle:奖项对应的角度
		$('.rotate-bg').stopRotate();
		$(".rotate-bg").rotate({
			angle:0, 
			duration: 5000, 
			animateTo: angle+1440, //angle是图片上各奖项对应的角度,1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
			callback:function(){
				alert(text)
			}
		}); 
	};
	
	$("#lotteryBtn").rotate({ 
	   bind: 
		 { 
			click: function(){
				var time = [0,1];
					time = time[Math.floor(Math.random()*time.length)];
				if(time==0){
					timeOut(); //网络超时
				}
				if(time==1){
					var data = [1,2,3,0]; //返回的数组
						data = data[Math.floor(Math.random()*data.length)];
					if(data==1){
						rotateFunc(1,203,'恭喜您抽中的一等奖')
					}
					if(data==2){
						rotateFunc(2,113,'恭喜您抽中的二等奖')
					}
					if(data==3){
						rotateFunc(3,338,'恭喜您抽中的三等奖')
					}
					if(data==0){
						var angle = [22,68,158,248,293];
							angle = angle[Math.floor(Math.random()*angle.length)]
						rotateFunc(0,angle,'很遗憾,这次您未抽中奖')
					}
				}
			}
		 } 
	   
	});
	
})

转载请注明:jQ酷 » jQuery圆盘旋转抽奖插件jQueryRotate

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。