如何简单快速的写出幸运转盘抽奖

公司做过一个项目，里面有幸运转盘的抽奖活动，当时没有想其他的，仅仅想自己写一个转盘出来。

由于我是一个自学前端的新人。知识有限，懂得少，于是绞尽脑汁解决bug，尝试到了一种方法。但是很局限，转盘能够转起来，就是只能转一次，用jQ的css()，和css3中的anmition添加动画。总之不成功，不再赘述，接下来直入正题。

当自己想不出来时，别人告诉我用插件，那么插件怎么用呢，在哪里找呢。http://www.jq22.com/ 。http://www.htmleaf.com/ 好多这样的插件库，自己去找。

 1 $(eq).rotate({ 　 　　　　
 2      angle:0, //起始角度 　　　　　
 3      animateTo:180, //结束的角度 　　　　　
 4     duration:500， //转动时间 　　　　　
 5     callback:function(){}, //回调函数 　　　　　
 6     easing: $.easing.easeInOutExpo //定义运动的效果，需要引jquery.easing.min.js    的文件 })
 7 $(eq).rotate(45); //直接这样子调用的话就是变换角度
 8 $(eq).getRotateAngle(); //返回对象当前的角度
 9 $(eq).stopRotare(); //停止旋转动画
10
11 //另外可以更方便的通过调用$(eq).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

下面是我写的转盘

var bRotate = false;var rotateFn = function (angles){bRotate = !bRotate;$('.zhuan').stopRotate();$('.zhuan').rotate({angle:0,animateTo:angles+1800,duration:3000,callback:function (){bRotate = !bRotate;}})};$('.zhizhen').click(function (){if(bRotate)return;var item = parseInt(10*Math.random());switch (item) {case 0:rotateFn(36);break;case 1:;rotateFn(72);break;case 2:rotateFn(108);break;case 3:rotateFn(144);break;case 4:rotateFn(180);break;case 5:rotateFn(216);break;case 6:rotateFn(252);break;case 7:rotateFn(288);break;case 8:rotateFn(324);break;case 9:rotateFn(0);break;}});

html

<div style="position: relative;"><img src="data:images/wai.png" alt="" class="zhuanpan"><img src="data:images/zhuan.png" alt="" class="zhuan"><img src="data:images/luck-rall.png" alt="" class="zhizhen"></div>

转载于:https://www.cnblogs.com/ilishuaiwei/p/7544480.html

如何简单快速的写出幸运转盘抽奖相关推荐

经验：如何快速地写出格雷码
经验:如何快速地写出格雷码更新历史 201901212: 首次发布格雷码(Binary Gray Code)的特点是: 相邻两个码之间,只相差了一个比特由于这个特性,格雷码在数字电路中使用甚广. ...
写出一个抽奖页面,有200个人参加抽奖
写出一个抽奖页面有200个人参加抽奖,每次抽出一个人,不能重复,必须每个人都要抽中奖前面10次抽奖要选中固定的10个人,每次就从这10人中随机抽取一人,不能重复从第11次开始就从剩余的190人当 ...
设计模式学习之简单聊聊如何写出优秀的代码
前言: 到底什么样的代码是优秀的代码?这个恐怕是仁者见仁.智者见智的问题.一个程序员随着能力的提升和视野的开拓不同的阶段看待这个问题会有不一样的答案.不过常见的一些评判的标准,像可维护性,可扩展性.可 ...
SEOer在网站优化中，如何快速的写出原创的文章？
成都SEO:关于行业企业站的原创文章该怎么写呢,相信这是一个令很多企业网站优化的人头痛的问题,尤其是专业行业,比如:橡胶止水带.钢铁.制造.机械等等行业,如果你写一篇行业相关的原创文章,对于普通的se ...
如何快速的写出原创文章原创内容
互联网时代,发表原创文章的渠道越来越多,比如个人博客.新闻网站.SNS等. 发表原创文章是一个值得讨论的话题. 首先,要发表一篇原创文章,我们需要考虑文章的内容和受众. 如果您发布的内容是技术新闻或更 ...
excel做地图热力图_如何简单快速的做出一个中国地图热力图 (数据随机虚构)
如何简单快速的做出一个中国地图热力图: 用 Echarts 即可以简单快速的写出: 除导入 echarts.js 外,还需要导入中国的 JSON 或是 js(现在官方不提供下载,需要自行下载,也可以 ...
python用什么软件编程1001python用什么软件编程-怎样才能写出 Pythonic 的代码 #P1001#...
L = [ i*i fori inrange(5) ] forindex, data inenumerate(L, 1):print(index, ':', data) 去除 import 语句和列表 ...
python好学吗1001python好学吗-怎样才能写出 Pythonic 的代码 #P1001#
L = [ i*i fori inrange(5) ] forindex, data inenumerate(L, 1):print(index, ':', data) 去除 import 语句和列表 ...
python open方法1001python open方法_怎样才能写出 Pythonic 的代码 #P1001#
L = [ i*i fori inrange(5) ] forindex, data inenumerate(L, 1):print(index, ':', data) 去除 import 语句和列表 ...
python发音1001python发音-怎样才能写出 Pythonic 的代码 #P1001#
L = [ i*i fori inrange(5) ] forindex, data inenumerate(L, 1):print(index, ':', data) 去除 import 语句和列表 ...

如何简单快速的写出幸运转盘抽奖

如何简单快速的写出幸运转盘抽奖相关推荐

最新文章

热门文章