简单的转盘抽奖.
调用接口
javascript 代码
- var _rotate = new iRotate('#div',{
- start : 0, // 开始角度, 可不写, 默认 0
- end :45, // 结束角度
- time :5000, // 持续时间, 可不写, 默认 1000
- easing : 'easeOut', // 动画形式, 目前只有'linear'和'easeOut'两种, 可不写, 默认'easeOut'
- callback : function(){ // 回调函数
- //this 为当前对象
- }
- });
- _rotate.stop(function(){ // 停止回调函数
- //this 为当前对象
- });
下面是例子:
html 代码
- <style>
- #RotateDiv{border-radius:50px 0 50px 50px }#RotateDiv,#RotateDiv2{ width: 50px;height: 50px; color: #fff;text-align: center; line-height: 50px; background: #444; position: relative; margin: 20px;border-radius:50px 0 50px 50px}
- </style>
- <h2 > 例子 1:</h2><br>
- <button id="RotateBtn"> 开始抽奖 </button>
- <div id="RotateDiv"></div>
- <h2 > 例子 2:(有时候网络不好, 点击后, ajax 可能还没有回调成功, 则会有一段等待时间, 则可以先设置持续旋转, 直到 ajax 回调成功再开始抽奖)</h2><br>
- <button id="RotateBtn2"> 开始抽奖 2</button>
- <div id="RotateDiv2"></div>
- <script src="http://itakeo.com/down/iRotate.js"></script>
- <script src="http://itakeo.com/down/iRotate_demo.js"></script>
源码点击这里查看 http://itakeo.com/blog/2017/02/09/irotate/ http://itakeo.com/blog/2017/02/09/irotate/
来源: http://www.qdfuns.com/article/15054/1a5a5bb318272b79c4f28e18b20e956e.html