这是一个原生JS、CSS实现的转盘效果（题目在这：http://www.cnblogs.com/arfeizhang/p/turntable.html），花了半个小时左右，准备睡觉，所以先贴一段代码，预计会抽空优化，让它在手机上也能运行；另外，如果看代码的时候有什么问题，请留言。。。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.      <title>转盘</title>
  7.      <style>
  8.      .holder {
  9.          width: 550px;
  10.          display: block;
  11.          margin: 10px auto;
  12.          padding: 20px;
  13.          border: 3px solid black;
  14.          border-radius: 10px;
  15.          position: relative;
  16.      }
  17.      .rotate-pointer {
  18.          display: block;
  19.          position: absolute;
  20.          width: 521px;
  21.          line-height: 10px;
  22.          top: 270.5px;
  23.          left: 37px;
  24.          -webkit-transition:all 4s ease-in-out;
  25.      }
  26.      #rules {
  27.          width: 260.5px;
  28.          height: 10px;
  29.          display: inline-block;
  30.          background-color: black;
  31.      }
  32.      </style>
  33.  </head>
  34.  
  35.  <body>
  36.      <div class="holder">
  37.          <img src="https://images0.cnblogs.com/i/636015/201406/151737329993303.jpg" alt="">
  38.          <div id="pointer" class="rotate-pointer">
  39.              <div id="rules"></div>
  40.          </div>
  41.      </div>
  42.      <script type="text/javascript">
  43.      window.onload = function() {
  44.          var table = document.getElementsByClassName('holder')[0],
  45.              tablePointer = document.getElementById('pointer'),
  46.              getRandom = function(min, max) {
  47.                  max = max || 1000;
  48.                  min = min || 0;
  49.                  return Math.floor(Math.random() * (max - min) + min);
  50.              },
  51.              degree = 0,
  52.              min_circle_times = 2,
  53.              max_circle_times = 6,
  54.              translate = function() {
  55.                  degree += getRandom(min_circle_times * 360, max_circle_times * 360);
  56.  
  57.                  requestAnimationFrame(function() {
  58.                      tablePointer.style.webkitTransform = 'rotate(' + degree + 'deg)';
  59.                  });
  60.              };
  61.          table.onclick = translate;
  62.  
  63.      };
  64.      </script>
  65.  </body>
  66.  
  67.  </html>

　　

　　昨天放出上述内容后，收到题目博主的评论，发现好像有些地方不符合需求，恩，又再试了一个版本，这个版本目前是支持手机的，不过还是只能在webkit内核下使用哦，源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>转盘</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8.     <style>
  9.     body {
  10.         margin:0px;
  11.     }
  12.     .holder {
  13.         text-align: center;
  14.         overflow: hidden;
  15.         display: block;
  16.         margin: 10px auto;
  17.         border: 3px solid black;
  18.         border-radius: 10px;
  19.         position: relative;
  20.     }
  21.     #table {
  22.         cursor: pointer;
  23.         display: inline-block;
  24.         max-width: 521px;
  25.         width: 100%;
  26.         -webkit-transition:all 4s ease-in-out;
  27.     }
  28.     </style>
  29. </head>
  30.  
  31. <body>
  32.     <div class="holder">
  33.         <img id="table" src="https://images0.cnblogs.com/i/631009/201406/181334125825974.png" alt="">
  34.     </div>
  35.     <script type="text/javascript">
  36.     window.onload = function() {
  37.         var degreeCount = 0,
  38.             table = document.getElementById('table'),
  39.             table_rect = table.getBoundingClientRect(),
  40.             circle_center = {
  41.                 x: table_rect.width / 2 + table_rect.left,
  42.                 y: table_rect.height / 2 + table_rect.top
  43.             },
  44.             min_circle_times = 2,
  45.             max_circle_times = 6,
  46.             getRandom = function(min, max) {
  47.                 max = max || 1000;
  48.                 min = min || 0;
  49.                 return Math.floor(Math.random() * (max - min) + min);
  50.             },
  51.  
  52.             // 根据两点求角度
  53.             getDegreeByPoint = function(start, enb) {
  54.                 var tan1 = (start.y - circle_center.y) / (start.x - circle_center.x),
  55.                     degree1 = Math.round(360 * Math.atan(tan1) / Math.PI),
  56.                     tan2 = (enb.y - circle_center.y) / (enb.x - circle_center.x),
  57.                     degree2 = Math.round(360 * Math.atan(tan2) / Math.PI);
  58.                 return -(degree1 - degree2);
  59.             },
  60.             rotate_rings = 0,
  61.             rotate = function(degree) {
  62.                 degree = degree - 0;
  63.                 if (Number.isNaN(degree)) {
  64.                     degree = degreeCount += getRandom(min_circle_times * 360, max_circle_times * 360);
  65.                 } else {
  66.                     degree += degreeCount;
  67.                 }
  68.                 requestAnimationFrame(function() {
  69.                     table.style.webkitTransform = 'rotate(' + degree + 'deg)';
  70.                 });
  71.             };
  72.  
  73.         // 事件监听器
  74.         var InputListener = function(tableId) {
  75.             this.tableId = tableId;
  76.             this.events = {};
  77.  
  78.             if (window.navigator.msPointerEnabled) {
  79.                 //Internet Explorer 10 style
  80.                 this.eventTouchstart = "MSPointerDown";
  81.                 this.eventTouchmove = "MSPointerMove";
  82.                 this.eventTouchend = "MSPointerUp";
  83.             } else {
  84.                 this.eventTouchstart = "touchstart";
  85.                 this.eventTouchmove = "touchmove";
  86.                 this.eventTouchend = "touchend";
  87.             }
  88.  
  89.             this._beginListen();
  90.         };
  91.         InputListener.prototype = {
  92.             on: function(event, callback) {
  93.                 if (!this.events[event]) {
  94.                     this.events[event] = [];
  95.                 }
  96.                 this.events[event].push(callback);
  97.             },
  98.             emit: function(event, data) {
  99.                 var callbacks = this.events[event];
  100.                 if (callbacks) {
  101.                     callbacks.forEach(function(callback) {
  102.                         callback(data);
  103.                     });
  104.                 }
  105.             },
  106.             _start: function(event) {
  107.                 this.emit("start", event);
  108.             },
  109.             _rotate: function(event) {
  110.                 this.emit("rotate", event);
  111.             },
  112.             _stop: function(event) {
  113.                 this.emit("stop", event);
  114.             },
  115.             _celebrate: function(event) {
  116.                 this.emit("celebrate", event);
  117.             },
  118.             _click: function(event) {
  119.                 this.emit("click", event);
  120.             },
  121.             _getPointByEvent: function(event, toucherName) {
  122.                 toucherName = toucherName || 'touches';
  123.                 var point = null;
  124.                 if (window.navigator.msPointerEnabled) {
  125.                     point = {
  126.                         x: event.pageX,
  127.                         y: event.pageY,
  128.                         time: Date.now()
  129.                     };
  130.                 } else {
  131.                     point = {
  132.                         x: event[toucherName][0].clientX,
  133.                         y: event[toucherName][0].clientY,
  134.                         time: Date.now()
  135.                     };
  136.                 }
  137.                 return point;
  138.             },
  139.             _beginListen: function() {
  140.                 var self = this,
  141.                     table = document.getElementById(this.tableId),
  142.                     startPoint = null,
  143.                     movePath = [];
  144.  
  145.                 // Respond to direction keys
  146.                 table.addEventListener('click', function(event) {
  147.                     self._click();
  148.                 });
  149.  
  150.                 table.addEventListener(this.eventTouchstart, function(event) {
  151.                     if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
  152.                         event.targetTouches > 1) {
  153.                         return; // Ignore if touching with more than 1 finger
  154.                     }
  155.                     startPoint = self._getPointByEvent(event);
  156.  
  157.                     movePath = [startPoint];
  158.                     self._start({
  159.                         start: startPoint
  160.                     });
  161.  
  162.                     event.preventDefault();
  163.                 });
  164.  
  165.                 table.addEventListener(this.eventTouchmove, function(event) {
  166.                     var endpoint = self._getPointByEvent(event);
  167.                     if ( !! endpoint) {
  168.                         movePath.push(endpoint);
  169.                         self._rotate({
  170.                             degree: getDegreeByPoint(startPoint, endpoint),
  171.                             start: startPoint,
  172.                             end: endpoint
  173.                         });
  174.                     }
  175.                     event.preventDefault();
  176.                 });
  177.  
  178.                 table.addEventListener(this.eventTouchend, function(event) {
  179.                     if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
  180.                         event.targetTouches > 0) {
  181.                         return; // Ignore if still touching with one or more fingers
  182.                     }
  183.                     var endpoint = self._getPointByEvent(event, 'changedTouches'),
  184.                         countToCal = 3,
  185.                         len = movePath.length;
  186.  
  187.                     self._stop({
  188.                         degree: getDegreeByPoint(startPoint, endpoint),
  189.                         start: startPoint,
  190.                         end: endpoint
  191.                     });
  192.                     movePath.push(endpoint);
  193.                     if (len <= 3) {
  194.                         self._click({
  195.                             start: startPoint
  196.                         });
  197.                     } else {
  198.                         var p1 = movePath[len - 1],
  199.                             p2 = movePath[len - 1 - 3],
  200.                             // 转动的弧度
  201.                             degree = getDegreeByPoint(p2, p1),
  202.                             time = p1.time - p2.time,
  203.                             speed = degree / time * 1000,
  204.                             // 速度转换为期望的周数，4指的是CSS动画时间
  205.                             expectDegree = (speed * 4) + min_circle_times;
  206.                         self._celebrate({
  207.                             start: p2,
  208.                             end: p1,
  209.                             degree: expectDegree
  210.                         });
  211.                     }
  212.                     event.preventDefault();
  213.                 });
  214.             }
  215.         };
  216.  
  217.         var listener = new InputListener('table');
  218.         listener.on('start', function(e) {
  219.             table.style.webkitTransition = 'all 0s';
  220.         });
  221.  
  222.         listener.on('rotate', function(e) {
  223.             console.log(e.degree);
  224.             rotate(e.degree);
  225.         });
  226.  
  227.         listener.on('stop', function(e) {
  228.             degreeCount += e.degree;
  229.             //degreeCount = degreeCount % 360;
  230.             table.style.webkitTransition = 'all 4s ease-in-out';
  231.         });
  232.  
  233.         listener.on('celebrate', function(e) {
  234.             rotate(e.degree);
  235.         });
  236.  
  237.         listener.on('click', rotate);
  238.     };
  239.     </script>
  240. </body>
  241.  
  242. </html>

一个可以在线运行的地址：http://www.w3cfuns.com/home.php?mod=space&uid=5446932&do=blog&quickforward=1&id=5398670

原生JS、CSS实现的转盘效果（目前仅支持webkit）的更多相关文章

  1. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  2. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  5. 使用原生js 实现点击消失效果

    JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  6. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  7. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  8. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  9. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

随机推荐

  1. html插入链接

    每个网页都已一个地址,用URL()标识,通常在网站内部创建链接时,通常使用相对地址 内部链接 <a href="链接地址" target="目标窗口的打开方式(-s ...

  2. docker基础命令详解

    Commands: attach    Attach to a running container build     Build an image from a Dockerfile commit  ...

  3. nginx看端口使用情况

    [root@iZ94j7ahvuvZ sbin]# netstat -apn Active Internet connections (servers and established) Proto R ...

  4. 【OpenGL】交互式三次 Bezier 曲线

    1. 来源 三次贝塞尔曲线就是依据四个位置任意的点坐标绘制出的一条光滑曲线 2. 公式 3. 实现 #include <iostream> #include <math.h> ...

  5. 【温故而知新-Javascript】比较 undefined 和 null 值

    JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYP ...

  6. 【Android UI设计与开发】4.底部菜单栏（一）Fragment介绍和简单实现

    TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...

  7. 用uGUI开发自定义Toggle Slider控件

    一.前言 写完<Unity4.6新UI系统初探>后,我模仿手机上的UI分别用uGui和NGUI做了一个仅用作演示的ToggleSlider,我认为这个小小的控件已能体现自定义控件的开发过程 ...

  8. Cookie测试工具小汇

    现在很多网站都用到Cookies,特别是用户的登陆以及购物网站的购物车. Cookies 通常用来存储用户信息和用户在某应用系统的操作,当一个用户使用Cookies 访问了某一个应用系统时,Web 服 ...

  9. vmware12安装vmtools

    一. 1. 机器要开启支持BIOS的选项. 二. 1. 点击vmware 应用 vmware install 2. 虚拟机: tar  xvf vmtools-distb.tgr.gz 3. 虚拟机: ...

  10. POJ 1182 食物链

    G - 食物链 Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit Stat ...