如何使用javascripts对齐旋转的轮子，使其停止在中心位置而不是随机位置？

我正在尝试使用javascript在wordpress上创建一个轮子。我已经做了车轮，它的旋转随机后，点击和停止现在在任何随机位置

我想编辑车轮功能，因此它将停止在车轮每个部分的中心位置。此外，我希望车轮不要停止并再次重复任何部分。因此，在每一次单击中，spinwheel都会在一个新的部分停止。并停止在车轮的中心位置。可能吗

这里是我用来在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
    );
}

var img=document.querySelector（'img'）；
img.addEventListener（'click'，onClick，false）；
函数onClick（）{
此.removeAttribute（'style'）；
var deg=1500+数学圆整（数学随机（）*1500）；
var css='-webkit变换：旋转（'+deg+'deg）；'；
此属性为.setAttribute(
“风格”，css
);
}

---

提前谢谢你

你可以做一些简单的数学题，比如：

var img=document.querySelector（'img'）；
img.addEventListener（'click'，onClick，false）；
函数onClick（）{
此.removeAttribute（'style'）；
var deg=数学地板（数学随机（）*360）；
//将度数拆分为8个值
var cad=deg%8；//获取最接近的值
deg=cad*45；//设置它
var css='-webkit变换：旋转（'+deg+'deg）；'；
此属性为.setAttribute(
“风格”，css
);
}

img{转换：转换1s线性；垂直对齐：中间；}

---

我修改了您的代码，使其旋转动画并计算度数 以下是JSFIDLE的工作原理：

var img=document.querySelector（'img'）；
img.addEventListener（'click'，onClick，false）；
var-arr=[45,90,135,180,225,270,315]；
无功电流_度=0；
函数getDegree（）{
如果（arr.length=0）{
jQuery（{deg:current_deg}）.animate（{deg:deg}）{
期限：2000年，
步骤：功能（现在）{
//在步骤回调中（动画的每个步骤都会触发该回调），
//您可以使用包含当前
//动画位置（`0`到`angle`）
jQuery（img）.css({
变换：'旋转（'+now+'deg）'
});
}
});
电流_度=度；
}否则{
jQuery（img）.css({
变换：“旋转（0度）”
});
}
}

应添加不带供应商前缀的属性

transform

。向CSS添加

img{transition:transform1s linear；vertical align:middle；}

说明了JS函数的作用。作为一项建议，可以在图像上方创建另一个元素，该元素也可以旋转，以使文本可选择，这将提高可访问性。。。进一步说，可以使用SVG。类似这样的东西。@Ricky_Ruiz你可以做得更多，但对于这个答案，这就足够了：）lol madalin，至少他可以添加过渡：-）我同意，这里有更多的工作要做，我已经用动画创建了这个，但图像很跳跃，我甚至不明白为什么，这应该从零开始用拉斐尔或帆布之类的东西来完成。顺便说一句：var deg=1500+Math.round（Math.random（）*1500）；做什么？我只是不明白，Ricky，这是链接上的一些好东西，不确定是否值得为此添加额外的库（greensock），但它看起来非常好。这在所有浏览器中都有效吗？做了一些调整：）非常感谢Sawan Shah。你的解决方案正是我想要的！！它没有重复这些章节。我只想问你两个问题。如果你愿意回答的话。1） 我怎样才能降低旋转速度？2） 车轮在特定次数的咔嗒声后停止工作。我可以随意做吗？再次感谢你。也非常感谢madalin ivascu！！

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)'
      });
  }
}