jQuery可指定奖品手机大转盘抽奖代码

jQuery可指定奖品手机大转盘抽奖代码

添加时间:2021-03-13 08:46:03
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:转盘
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

jQuery可指定奖品手机移动端大转盘抽奖代码,界面十分精美,还带中奖名单滚动效果。
jQuery可指定奖品手机大转盘抽奖代码
分类:抽奖 > 转盘 难易:初级

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js" ></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js" ></script>
<script>
	//只需要更换turnplate的id就可以更换相应的奖品
	var turnplate={
      	restaraunts:["iphone x", "100话费红包", "周大福吊坠", "50个赠币", "爱奇艺月卡", "1个赠币", "欧乐B牙刷", "1个积分"],       //大转盘奖品名称
      	rotateFlag:false,      //false:停止;ture:旋转
      	id:1     //抽中的id 1:iphone x  2:100话费红包   3:周大福吊坠 ......
  	};
  	$(document).ready(function(){
	    //旋转转盘 item:奖品位置; txt:提示语;
	    var rotateFn = function (item, txt){
	      	var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
	      	if(angles<270){
	       	 angles = 270 - angles; 
	      	}else{
	      	  angles = 360 - angles + 270;
	      	}
	      	$('.turntable_box').stopRotate();
	     	$('.turntable_box').rotate({
	       		angle:0,
	        	animateTo:angles+1800+22.5,
	        	duration:8000,
	       		callback:function (){
	         		alert(txt);
	          		turnplate.rotateFlag = !turnplate.rotateFlag;
	        	}
	      	});
	    };
	
	    $('.pointer').click(function (){
	      	if(turnplate.rotateFlag)return;
	      	turnplate.rotateFlag = !turnplate.rotateFlag;
	      	var item = turnplate.id;
	      	//指针落在对应奖品区域的中心角度
	      	rotateFn(item-2, turnplate.restaraunts[item-1]);
	      	//console.log(item);
	    });	
	    
	    var swiper = new Swiper('.list', {
	      	direction: 'vertical',
	      	autoplay: true,
	      	speed:1300,
	      	loop:true
	    });
	  
	});  
</script>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery可指定奖品手机大转盘抽奖代码

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.167707s