在mousemove上旋转多组形状

Question

我有一组对角线跟随鼠标移动。

如果页面上只有一个组的实例，但是我需要有多个实例，这就很好了。

当我复制HTML时，它们不会彼此独立工作，也不会产生期望的效果。

jQuery：

var dash = $(".graphic-wave__dash");
if(dash.length > 0){
  var offset = dash.offset();
  function mouse(evt){
    var center_x = (offset.left) + (dash.width()/2);
    var center_y = (offset.top) + (dash.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    dash.css('-moz-transform', 'rotate('+degree+'deg)');
    dash.css('-webkit-transform', 'rotate('+degree+'deg)');
    dash.css('-o-transform', 'rotate('+degree+'deg)');
    dash.css('-ms-transform', 'rotate('+degree+'deg)');
    dash.removeClass('original');
  }
  $(document).mousemove(mouse);
}

HTML：

<div class="graphic-wave">
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
</div>

<div class="graphic-wave" style="left: 400px;">
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
</div>

https://jsfiddle.net/ob80/7nxf07vo/3/

有人能帮忙吗？

Answer 1

您需要分别计算每一行的旋转，此时您正在制定一个单独的旋转样式，并将其应用到graphic-wave__dash类的每个元素中。

下面是一个简单的例子我还没有做任何优化，这可能是非常低效的。(我没有把它放到一个片段中，因为它看起来不支持SCSS)

var dash = $(".graphic-wave__dash");
if (dash.length > 0) {

  function mouse(evt) {
    dash.each(function() { // Calculate per element, not just once
      var offset = $(this).offset(); // Workout the offset per element
      var center_x = (offset.left) + ($(this).width() / 2); // Use $(this) to reference the current element
      var center_y = (offset.top) + ($(this).height() / 2);
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      $(this).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-ms-transform', 'rotate(' + degree + 'deg)');
      $(this).removeClass('original');
    });
  }
  $(document).mousemove(mouse);
}

所作的修改如下：

• 在函数内部，用类循环遍历每个元素。
• 计算每个元素的偏移量，并不是全部基于该类的第一个实例。

Answer 2

我改进了DBS回答的性能，将所有项的center_x和center_y设置为属性，因此不必每次计算：

var dash = $(".graphic-wave__dash");
if (dash.length > 0) {

    dash.each(function() {
      var offset = $(this).offset();
      $(this).attr('center_x',(offset.left) + ($(this).width() / 2));
      $(this).attr('center_y',(offset.top) + ($(this).height() / 2));
  });

  function mouse(evt) {
    dash.each(function() {
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - $(this).attr('center_x'), mouse_y - $(this).attr('center_y'));
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      $(this).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-ms-transform', 'rotate(' + degree + 'deg)');
      $(this).removeClass('original');
    });
  }
  $(document).mousemove(mouse);
}

这是小提琴：https://jsfiddle.net/7nxf07vo/6/