如何使用javascript对齐旋转轮以停止在中心位置而不是随机位置？

Question

我正在尝试使用 javascript 在 WordPress 上创建一个轮子。我已经完成了轮子的制作，点击后它会随机旋转，现在停在任何随机位置。

我想编辑滚轮功能，这样它就会停在滚轮各部分的中心位置。另外，我希望轮子不要停止并再次重复任何部分。因此，每次点击旋转轮都会停在一个新的部分。并停在车轮的中心位置。可能的？

这是我用来在 WordPress 上旋转轮子的东西

<img src="elevatingpolitics.com/wp-content/uploads/2016/10/EP-wheel.png" alt="" usemap="#linkwheel" width="500" height="auto" style="">


var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg = 1500 + Math.round(Math.random() * 1500);

    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

！！

提前谢谢您

Answer 1

您可以做一些简单的数学运算，例如：

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg =Math.floor(Math.random() * 360);

     //split the degrees in 8 values
     var cad = deg%8;//get the closest value
     deg = cad*45;//set it
    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

img { transition: transform 1s linear; vertical-align: middle; }

<img src="http://elevatingpolitics.com/wp-content/uploads/2016/10/EP-wheel.png" alt="" usemap="#linkwheel" width="500" height="auto" style="">

注意：您可能想将中心放在不同的图片中或删除文本并在图片上使用 div

Answer 2

我修改了你的代码来旋转动画并计算度数 这是正在运行的 JSFiddle：spin animate

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);
var arr = [45, 90, 135, 180, 225, 270, 315];
var current_deg = 0;

function getDegree() {
  if (arr.length <= 0) {
    return -1;
  }
  var i = Math.round(Math.random() * 1000) % arr.length;
  var deg = Math.round(Math.random() * 100) * 360 + arr[i];
  arr.splice(i, 1);
  return deg;
}

function onClick() {
  jQuery(img).removeAttr('style');
  var deg = getDegree();
  if (deg >= 0) {
    jQuery({deg: current_deg}).animate({deg: deg}, {
      duration: 2000,
      step: function(now) {
        // in the step-callback (that is fired each step of the animation),
        // you can use the `now` paramter which contains the current
        // animation-position (`0` up to `angle`)
        jQuery(img).css({
          transform: 'rotate(' + now + 'deg)'
        });
      }
    });
    current_deg = deg;
  } else{
        jQuery(img).css({
          transform: 'rotate(0deg)'
      });
  }
}

Answer 3

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg =Math.floor(Math.random() * 360);

     //split the degrees in 8 values
     var cad = deg%8;//get the closest value
     deg = cad*45;//set it
    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

img { transition: transform 1s linear; vertical-align: middle; }

<img src="http://elevatingpolitics.com/wp-content/uploads/2016/10/EP-wheel.png" alt="" usemap="#linkwheel" width="500" height="auto" style="">

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg =Math.floor(Math.random() * 360);

     //split the degrees in 8 values
     var cad = deg%8;//get the closest value
     deg = cad*45;//set it
    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

img { transition: transform 1s linear; vertical-align: middle; }

<img src="http://elevatingpolitics.com/wp-content/uploads/2016/10/EP-wheel.png" alt="" usemap="#linkwheel" width="500" height="auto" style="">