现在位置首页 / 前端开发 /正文

Jquery 移动浏览器仿淘宝大转盘抽奖插件jqueryrotate

作者: IT小兵 | 2014年4月16日| 热度:℃ | 评论: |参与:

随着手机端浏览器和微信的普及,越来越多的网站支持mobile设备了。

今天分享一个支持mobile的仿淘宝大转盘抽奖插件:jqueryrotate

官方地址: 


http://code.google.com/p/jqueryrotate



支持浏览器:

  • Internet Explorer 6.0 >

  • Firefox 2.0 >

  • Safari 3 >

  • Opera 9 >

  • Google Chrome

截图:

使用

1、引用:

<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" language="javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" language="javascript" src="alert.js"></script>

2、调用函数:

$(function () {
var rotateFunc = function (angle, text) {  //awards:奖项,angle:奖项对应的角度
$('#lotteryBtn').stopRotate();
$("#lotteryBtn").rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440, 
//angle是图片上各奖项对应的角度,1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
callback: function () {
alert(text)
}
});
};
$("#btnstart").rotate({
bind: {
click: function () {
var data = [1, 2, 3, 4, 5, 0]; //返回的数组
data = data[Math.floor(Math.random() * data.length)];
if (data == 1) {
	rotateFunc(0, '恭喜您抽中的一等奖')
}
if (data == 2) {
	rotateFunc(60, '恭喜您抽中的二等奖')
}
if (data == 3) {
	var angle = [120, 300];
	angle = angle[Math.floor(Math.random() * angle.length)]
	rotateFunc(angle, '恭喜您抽中的三等奖')
}
if (data == 4) {
	rotateFunc(180, '恭喜您抽中的四等奖')
}
if (data == 5) {
	rotateFunc(240, '恭喜您抽中的五等奖')
}
if (data == 0) {
	var angle = [30, 90, 150, 210, 270, 330];
	var msg = ['不要灰心', '祝你好运', '再接再厉', 
	'运气先攒着', '要加油哦', '谢谢参与'];
	var rd = Math.floor(Math.random() * angle.length);
	angle = angle[rd];
	msg = msg[rd];
	rotateFunc(angle, msg);
}
}
}
});
});

3、html:

<div  class="main">
<div class="out">
<div class="out1"><img id="lotteryBtn" src="out.png"></div>
</div>
<div class="in">
<div class="in1"><img id="btnstart" src="in.png"></div>
</div>
</div>

转发注明:IT分享

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询