标签:动画 抽奖 旋转 height rotate js rotateFn 转盘
大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现。
通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐。
这里推荐一款插件:http://www.jqueryrotate.com/
使用jqueryRotate插件来实现旋转,可以设置持续时间和曲线,上手快,兼容强。
方法:
rotate(angle); rotate(parameters); getRotateAngle(); stopRotate();
1、rotate(0deg)直接传一个角度。
2、rotate(parameters),可选值如下:
参数名 | 类型 | 说明 |
angle | Number | 旋转到指定的角度,不带动画,默认是0 |
animateTo | Number | 旋转到指定的角度,使用动画 |
bind | Object | 可以传入一个对象,作为事件绑定到元素上。 |
center | Array | 用来设定旋转的中心,传入的数组是[X,Y]格式的,可以使用数值[100,100]或者百分比[“50%”,“50%”],默认是以元素的中心点旋转 |
duration | Number | 指定动画的持续时间,默认是1000毫秒 |
step | Function | 传入一个回调函数在动画的每一步都会调用一下 |
easing | Function | 让动画看起来更自然,感觉用不到,而且本人对图形学没啥研究,感兴趣的官网有详细描述,就不再深究了…. |
callback | Function | 当动画完成时的回调函数。 |
3、getRotateAngle() 获取当前的角度。
4、stopRatate() 停止旋转
关于jqueryRotate的使用可以多查文档,以下为用jqueryRotate.js实现的简易大转盘,需要引入jquery.js和jqueryRotate.js。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <meta name="full-screen" content="yes"> <meta name="browsermode" content="application"> <meta name="full-screen" content="yes"> <meta name="browsermode" content="application"> <meta name="x5-orientation" content="portrait"> <title>大转盘</title> </head> <style> .box { margin: 6vh auto; width: 80vw; height: 80vw; position: relative; border-radius: 100%; display: flex; flex-flow: row wrap; overflow: hidden; } .draw_item { width: 40vw; height: 40vw; text-align: center; line-height: 40vw; font-size: 3vw; color: #fff; } .needle { position: absolute; top: 36vw; left: 25vw; width: 30vw; height: 6vw; font-size: 6vw; color: #fff; font-weight: bold; text-align: center; line-height: 6vw; } button{ width: 20vw; height: 8vw; margin: auto; display: block; } </style> <body> <div class="box"> <div class="draw_item" style="background: red;">谢谢参与</div> <div class="draw_item" style="background: orange;">热门电影票</div> <div class="draw_item" style="background: green;">品牌优惠券</div> <div class="draw_item" style="background: blue;">限量版公仔</div> <div class="needle">----></div> </div> <button id="btn">开启转盘</button> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script> //是否可以抽奖 var bRotate = true; var rotateFn = function(awards, angles, txt) { $('.needle').stopRotate(); $('.needle').rotate({ angle: 0, animateTo: angles + 2520, duration: 7000, callback: function() { //抽奖结果 alert(txt); } }) }; $('#btn').click(function() { if(!bRotate){ alert("没有抽奖机会了"); return; } var item = 0; bRotate = !bRotate; switch(item) { case 0: rotateFn(0, 225, '谢谢参与'); break; case 1: rotateFn(1, 315, '热门电影票'); break; case 2: rotateFn(2, 135, '品牌优惠券'); break; case 3: rotateFn(3, 45, '限量版公仔'); break; } }); </script> </body> </html>
效果如下:
标签:动画,抽奖,旋转,height,rotate,js,rotateFn,转盘 来源: https://www.cnblogs.com/nanyang520/p/11383423.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。