这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了利用 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为当前对象
- });
实现的效果图如下:
完整的示例代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 简单转盘效果
- </title>
- <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>
- </head>
- <body>
- <p>
- 举例子:
- </p>
- <p>
- <button id="RotateBtn">
- 开始抽奖
- </button>
- </p>
- <div id="RotateDiv">
- </div>
- <p>
- 默认转动:
- </p>
- <p>
- <button id="RotateBtn2">
- 开始抽奖2
- </button>
- </p>
- <div id="RotateDiv2">
- </div>
- <script type="text/javascript">
- window.iRotate = (function(w, d) {
- function R(obj, json) {
- this.obj = (typeof obj == 'object') ? obj: d.querySelector(obj);
- this.startTime = Date.now();
- this.timer = null;
- this.rotate(json);
- };
- R.prototype = {
- rotate: function(json) {
- var t = this,
- times = json['time'] || 1000;
- clearInterval(t.timer) t.timer = setInterval(function() {
- var changeTime = Date.now(),
- tm = times - Math.max(0, t.startTime - changeTime + times),
- value = Tween[json['easing'] || 'easeOut'](tm, +json['start'] || 0, json['end'] - ( + json['start'] || 0), times);
- t.obj.style['transform'] = t.obj.style['-webkit-transform'] = 'rotate(' + value60 + 'deg)';
- t.obj.setAttribute('data-rotate', value60) if (tm == times) {
- clearInterval(t.timer);
- json.callback && json.callback.call(t.obj)
- }
- },
- 10)
- },
- stop: function(fn) {
- clearInterval(this.timer);
- fn && fn.call(this.obj)
- }
- };
- return R;
- })(window, document);
- var Tween = {
- linear: function(t, b, c, d) {
- return c * t / d + b;
- },
- easeOut: function(t, b, c, d) {
- return - c * (t /= d) * (t - 2) + b;
- }
- }
- //默认转动
- ; (function() {
- var off = true,
- off2 = true;
- RotateBtn.onclick = function() {
- if (!off) return //判断是否在旋转
- off = false new iRotate('#RotateDiv', {
- end: 45 + 1800,
- time: 5000,
- callback: function() { //回调函数
- this.innerHTML = this.getAttribute('data-rotate') off = true
- }
- });
- }
- var r = null;
- function rotate2() { //递归持续旋转
- r = new iRotate('#RotateDiv2', {
- start: 0,
- end: 360,
- time: 1000,
- easing: 'linear',
- callback: function() {
- rotate2()
- }
- });
- }
- rotate2() RotateBtn2.onclick = function() {
- if (!off2) return //判断是否在旋转
- off2 = false r.stop(); //停止之前的旋转
- new iRotate('#RotateDiv2', {
- start: RotateDiv2.getAttribute('data-rotate'),
- end: 65 + 1800,
- time: 5000,
- callback: function() { //回调函数
- this.innerHTML = this.getAttribute('data-rotate') off2 = true
- }
- });
- }
- })();
- </script>
- </body>
- </html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0616/327726.html