JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
来源:互联网 发布:淘宝确认自动收货时间 编辑:程序博客网 时间:2024/05/18 00:45
最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。
使元素围绕中心根据角度偏转,在元素的transform属性中可以这样写:
transform:rotate(30deg);//偏转30度-moz-transform:rotate(30deg);//兼容Firefox及Opera-o-transform:rotate(30deg);
关于transform的详细介绍可以看 这里 。
具体的思路是:我在转盘中计划了8个奖项,因此平均每个奖项在盘中所占角度为45度。指针位置固定于任意奖项正中1/2处(这里假设为正北方向)。setTimeout间隔时间不断增加偏转,以200次为例,设每次增加角度为amount=18度,最后旋转结果为总共走了3600度(10圈)回到原位。于此通过控制amount的数量变化控制奖项(每增减45/200就能停到下/上一奖项上)。
旋转中的快慢效果,可以通过设置不同阶段amount的缩减/增加比例实现,只需使增减比例相同时间程度内互相对称即可。
具体的操作方法我是这样写的(用到了jQuery更加方便操作元素):
function setDegree($obj,deg){$obj.css({'transform': 'rotate('+deg+'deg)','-moz-transform':'rotate('+deg+'deg)','-o-transform': 'rotate('+deg+'deg)'});}function rotate(){ var $tar = $('#rotatebg'),i,cnt = 100, //用做ratio的索引(10-29)total = 0, //记录上一次的变化结果ratio = [], //存放角度的变化比例,制造快慢过渡效果offset = <?php echo $prize; ?>, //0-7,代表需要停到的奖项,由后端传入amount = 18 - ( 0.225*offset ), //每次每多出45/200=0.225度,200次就多偏转45度result = <?php echo $prizeName; ?>; //奖项名称用于显示,由后端传入ratio[1] = [0.2, 0.4, 0.6, 0.8, 1, 1, 1.2, 1.4, 1.6, 1.8];ratio[2] = [1.8, 1.6, 1.4, 1.2, 1, 1, 0.8, 0.6, 0.4, 0.2];for(i=0;i<200;i++){ //设计为200次50ms的间隔,10s出结果感觉比较好setTimeout(function(){ //计算每次偏转增量,对应阶段的增减比例最终造成快慢变化var deg = amount*( ratio[ String(cnt).substr(0,1) ][ String(cnt).substr(1,1) ] );setDegree($tar,deg+total);//改变偏转total += deg;//记录cnt++;//依据次数用作ratio的索引,这里用到了闭包不能使用i},i*50);}setTimeout(function(){ alert( result );//完成},200*50+500);}//绑定事件,点击指针开始var Flag = false;$(function(){ $("#needle").click(function(){ if(!Flag){ Flag = true; rotate(); } });});
值得一提的是,在200次的循环和setTimeout中造成了闭包。因此虽然实际第一个setTimeout开始时,for语句已经结束了(此时i已为200,不能作为cnt使用),但是上级变量的值(cnt及total)依然传递和留存到了每次动作中,使其可以被操作。这也是闭包的妙处。
关于抽奖的流程,奖项为后端运行得出传入,使逻辑和表现分开,转盘这一过程实际只承担了结果的表现。这样设计可以防止结果被恶意更改,安全性更有保障。
实际中再往下完善的话,可以把具体的参数都改由后端传入,使得前后统一更方便,另外还可在点击转盘开转时,Ajax异步回传确认动作,作为判定奖项生效的依据,后再进入旋转。这里主要分享前端部分的过程,具体的流程就不再敖述了。
实际效果请移步 小样 。
本文也发表在我的独立博客blog.mc-zone.me上,点击 访问此文
- JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
- 抽奖大转盘 js
- 转盘抽奖js实现
- Js实现简易大转盘抽奖代码
- 利用jqueryRotare实现抽奖转盘
- 利用jqueryRotare实现抽奖转盘
- 利用jqueryRotare实现抽奖转盘
- 利用SurfaceView实现转盘抽奖
- 简单实现大转盘抽奖
- java实现大转盘抽奖
- Cocos2d js 实现转盘抽奖
- jquery.rotate插件实现转盘抽奖示例
- jQuery实现旋转转盘抽奖代码
- 微信js 大转盘抽奖
- 抽奖大转盘
- 大转盘抽奖算法
- 大转盘抽奖
- 抽奖大转盘
- Codeforces —— 359A Table
- SPI协议概括
- 大数相乘解决办法,用字符串表示的大数
- 解決 Android 平板無法直接寫入外部 SDCard 問題
- Android 视频截图
- JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
- WIP基础知识
- UVa 10375 Choose and divide (组合数相除)
- 在线生成二维码(可以包含图片LOGO)
- linux系统编程3
- Working from home VS Working at office -- Speaking
- API函数实现注册表的读取,写入,删除
- 什么是urlencode编码
- linux系统编程4