尝试将多个元素与鼠标指针进行比较

Question

我正在尝试将多个元素旋转到鼠标光标。它似乎正在工作，但它们都朝同一方向旋转，而不是特定于我的鼠标。我假设其中一个跟着我的鼠标，其余的只跟那个角度相同。

如何旋转然后单独朝我的鼠标旋转？我做错了吗？

有人可以解释一下如何让它们都指向我的鼠标吗？

＆＃13;

＆＃13;

$(function() {
  $('.js-follow-mouse').followMouse();
});

$.fn.followMouse = function() {
  return $(this).each(function(index, item) {
    item = $(item);
    if (!item.data('FollowMouse')) {
      item.data('FollowMouse', new FollowMouse(item));
    }
  });
};

var FollowMouse = function(element) {
  this.element = element;
  mousePos = {
    x: -1,
    y: -1
  };
  $('body').on('mousemove', this.rotateObject.bind(this));
};

FollowMouse.prototype.rotateObject = function() {
  mousePos.x = event.pageX;
  mousePos.y = event.pageY;
  var curPos = {
    x: $('img').offset().left,
    y: $('img').offset().top
  };
  var nextPos = {
    x: mousePos.x,
    y: mousePos.y
  };
  $(this.element).find('img').each(function() {
    offsetLeft = mousePos.x - $(this).offset().left;
    offsetTop = mousePos.y - $(this).offset().top;
    deg = (Math.atan2(nextPos.y - curPos.y, nextPos.x - curPos.x) * 180 / Math.PI);
    $(this).css({
      '-webkit-transform': 'rotate(' + deg + 'deg)',
      '-moz-transform': 'rotate(' + deg + 'deg)',
      '-ms-transform': 'rotate(' + deg + 'deg)',
      '-o-transform': 'rotate(' + deg + 'deg)',
      'transform': 'rotate(' + deg + 'deg)'
    });
  });
};

＆＃13;

.pencil img { 
  height: 5px;
  width: 20px;
  background-color: #000000;
}
.pencil-2 {
  margin-left: 150px
}
body { 
  width: 100vw;
  height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-follow-mouse">
  <div class="pencil"><img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""></div>
  <div class="pencil pencil-2"><img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""></div>
</div>

＆＃13;

＆＃13;

＆＃13;

由于

Answer 1

好主意。您需要为curPos循环中的每个图片重新定义each个参数：

$(function() {
  $('.js-follow-mouse').followMouse();
});

$.fn.followMouse = function() {
  return $(this).each(function(index, item) {
    item = $(item);
    if (!item.data('FollowMouse')) {
      item.data('FollowMouse', new FollowMouse(item));
    }
  });
};

var FollowMouse = function(element) {
  this.element = element;
  mousePos = {
    x: -1,
    y: -1
  };
  $('body').on('mousemove', this.rotateObject.bind(this));
};

FollowMouse.prototype.rotateObject = function() {
  mousePos.x = event.pageX;
  mousePos.y = event.pageY;
  var curPos = {
    x: $('img').offset().left,
    y: $('img').offset().top
  };
  var nextPos = {
    x: mousePos.x,
    y: mousePos.y
  };
  $(this.element).find('img').each(function() {

    curPos.x = $(this).offset().left,
      curPos.y = $(this).offset().top;
    // curPos just needs to be defined for each image
    offsetLeft = mousePos.x - $(this).offset().left;
    offsetTop = mousePos.y - $(this).offset().top;
    deg = (Math.atan2(nextPos.y - curPos.y, nextPos.x - curPos.x) * 180 / Math.PI);
    $(this).css({
      '-webkit-transform': 'rotate(' + deg + 'deg)',
      '-moz-transform': 'rotate(' + deg + 'deg)',
      '-ms-transform': 'rotate(' + deg + 'deg)',
      '-o-transform': 'rotate(' + deg + 'deg)',
      'transform': 'rotate(' + deg + 'deg)'
    });
  });
};

.pencil img {
  height: 5px;
  width: 20px;
  background-color: #000000;
}
.pencil-2 {
  margin-left: 150px
}
body {
  width: 100vw;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-follow-mouse">
  <div class="pencil">
    <img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt="">
  </div>
  <div class="pencil pencil-2">
    <img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt="">
  </div>
</div>