介绍 var _rotate =, new iRotate (& # 39; # div # 39;, {
,start : 0,,//开始角度,可不写,默认0
,最终获得:45岁//结束角度
,time : 5000//持续时间,可不写,默认1000
,easing : & # 39; easeout # 39;,,//动画形式,目前只有& # 39;线性# 39;和& # 39;easeout # 39;两种,可不写,默认& # 39;easeout # 39;
,callback :函数(){,//回调函数//这个才能为当前对象
,}
})；
_rotate.stop(函数(){,//停止回调函数
,//这为当前对象
}); & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
& lt; title>简单转盘效果& lt;/title>
& lt; style>
# RotateDiv {border - radius: 50 px 0, 50 px 50 px }
# RotateDiv, # RotateDiv2{,宽度:50 px;高度:,50 px;,颜色:,# fff; text-align:,中心;,行高:,50 px;,背景:,# 444;,位置:,相对;,保证金:,20 px; border - radius: 50 px 0, 50 px 50 px}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>举例子:& lt;/p>
& lt; p>, & lt; button id=癛otateBtn"在开始抽奖& lt;/button>, & lt;/p>
& lt; div id=癛otateDiv"祝辞& lt;/div>
& lt; p>默认转动:& lt;/p>
& lt; p>, & lt; button id=癛otateBtn2"在开始抽奖2 & lt;/button>, & lt;/p>
& lt; div id=癛otateDiv2"祝辞& lt;/div>
& lt; script 类型=拔谋?javascript"比;
window.iRotate =,(函数(w, d) {
,function R (obj, json) {=,this.obj (typeof obj==& # 39;对象# 39;),?,obj :, d.querySelector (obj);=,,this.startTime Date.now ();=,this.timer 零;
,this.rotate (json);
,};
,R.prototype =, {
,rotate :函数(json) {
,var t =,, times =, json(& # 39;时间# 39;],| |,1000;
,clearInterval (t.timer)=,,t.timer setInterval(函数(){
,var changeTime =, Date.now (),=,,tm times 作用;Math.max (0, t.startTime 安康;changeTime +,),=,,value 渐变(json(& # 39;宽松# 39;],| |,& # 39;easeout # 39;] (tm + json(& # 39;开始# 39;],| |,0,json(& # 39;结束# 39;],安康;(+ json(& # 39;开始# 39;],| |,0),次);
,t.obj.style[& # 39;变换# 39;],=,t.obj.style [& # 39; -webkit-transform& # 39;],=, & # 39;旋转(& # 39;+值% 360 + & # 39;度)& # 39;;
,t.obj.setAttribute (& # 39; data-rotate& # 39;,值% 360)
,如果(tm==次){
clearInterval才能(t.timer);
json.callback 才能,,,,json.callback.call (t.obj)
,}
},10)
},
,stop :函数(fn) {
,clearInterval (this.timer);
,fn 及,fn.call (this.obj)
,}
,};
,return R;
})(窗口、文档);
var Tween =,{线性:function (t, b, c, d) {return c * t/d +, b;}, easeOut:,函数(t, b, c, d) {return -c * (t/d=) * (2), +, b;}}//默认转动
;(函数(){
,var off =,真的,off2 =,真的;=,RotateBtn.onclick 函数(){
,如果(!)return //判断是否在旋转
,off =false
,new iRotate (& # 39; # RotateDiv& # 39;, {
1800年,最终获得:45 +,
,time : 5000年,
,callback :函数(){,//回调函数
this.innerHTML 才能=,this.getAttribute (& # 39; data-rotate& # 39;)
off 才能=,真的
,,}
,});
,}
,var r =,空;
,function rotate2(){,//递归持续旋转=,,r new iRotate (& # 39; # RotateDiv2& # 39;, {
,start : 0,
360年,最终获得:
,time : 1000年,
,easing : & # 39;线性# 39;
,callback :函数(){
,rotate2 ()
,}
,});
,}
,rotate2 ()=,RotateBtn2.onclick 函数(){
,如果(!远比return //判断是否在旋转
,off2 =false
,r.stop();,//停止之前的旋转
,new iRotate (& # 39; # RotateDiv2& # 39;, {
,start : RotateDiv2.getAttribute (& # 39; data-rotate& # 39;),
,最终获得:65 + 1800,
,time : 5000年,
,callback :函数(){,//回调函数
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家介绍使用Javascript怎么编写一个转盘抽奖功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>首先来看看接口说明:,
<强>实现的效果图如下:
<强>完整的示例代码如下:
