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

Here is the wheel image with some sections I am using !!

提前谢谢

Answer 1

你可以做一些简单的数学运算：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：您可能希望将中心放在不同的图片中或删除文本并在图片上使用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)'
      });
  }
}

如何使用javascripts将旋转轮对准中心位置而不是随机位置？

2 个答案: