javascript - Javascript - 让手臂指向悬停的元素

问题描述

我试图让一个旋转的前臂指向悬停在上面的链接。

它适用于我正在制作的实际网站，但指向不是很准确（它几乎在那里） - 我认为这可能是因为代码被设计为使用图像的中心（即箭头）和我'正在使用 CSStransform-origin: center left;来强制它吗？

我已经做了一些研究，但我无法克服最后一个障碍 - 如何调整 JS 以使指向旋转准确？

这是我正在使用的设置：

$(function() {
  var img = $('.arrow');

  // Store clock wise degrees of all elements
  var clockwiseElemDegrees = {};
  var currentArrowAngle = 0;

  // Treat initial position of arrow as element 0
  var prevElem = '0';
  clockwiseElemDegrees['0'] = 0;

  if (img.length > 0) {

    var offset = img.offset();
    var imgX = offset.left + (img.width() / 2);
    var imgY = offset.top + (img.height() / 2);

    // Get element degrees
    $('.animation-trigger').each(function() {
      var element = $(this);
      var elementPosition = element.offset();
      var elementX = elementPosition.left + (element.width() / 2);
      var elementY = elementPosition.top + (element.height() / 2);

      var radians = Math.atan2(elementY - imgY, elementX - imgX);
      var degrees = radians * (180 / Math.PI);

      clockwiseElemDegrees[element.attr('elem')] = (degrees < 0) ? (degrees + 360) : degrees;
    });


    $('.animation-trigger').mouseenter(function(event) {

      // Check if arrow should be rotated clockwise
      var clockwiseDegreesForNextElem = clockwiseElemDegrees[$(this).attr('elem')];
      var clockwiseDegreesForPrevElem = clockwiseElemDegrees[prevElem];
      if (clockwiseDegreesForNextElem < clockwiseDegreesForPrevElem)
        clockwiseDegreesForNextElem += 360;

      var clockwiseRotationRequired = clockwiseDegreesForNextElem - clockwiseDegreesForPrevElem;

      if (clockwiseRotationRequired <= 180) {
        // Do clockwise rotation
        currentArrowAngle += clockwiseRotationRequired;
      } else {
        // Do anticlockwise rotation
        currentArrowAngle -= (360 - clockwiseRotationRequired);
      }

      prevElem = $(this).attr('elem');

      img.css('-moz-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-webkit-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-o-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-ms-transform', 'rotate(' + currentArrowAngle + 'deg)');
    });
  }
});

.scriptybits {
  width: 44%;
  box-sizing: border-box;
  display: inline-block;
}

.wholepage {
  width: 100%;
  height: 95vh;
  position: relative;
}

.scriptcontainer {
  margin-left: 5% !important;
}

.arrow {
  position: absolute;
  margin-top: 20vh;
  margin-left: 4px;
  width: 20vh;
  z-index: 5;
  -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transform-origin: center left;
}

.pageleft {
  display: inline-block;
}

.pageright {
  text-align: center;
  width: 100%;
  display: block;
  position: relative;
  height: 90vh;
}

.menucontainer {
  display: block;
  margin: auto;
  text-align: center;
  width: 60%;
  position: absolute;
  left: 43%;
  top: 9vh;
}

.leaningman {
  height: 86vh;
  display: block;
  position: absolute;
  top: -5vh;
}

.animation-trigger {
  border: 3px solid black;
  border-radius: 10px;
  padding: 10px 30px 10px 30px;
  color: black;
  font-size: 30px;
  background-color: white;
  display: block;
  margin-bottom: 20px;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

<div class="wholepage">
  <div class="scriptybits">
    <div class="pageleft" style="float:left; width:100%;">
      <div class="scriptcontainer" style="position:relative;">
        <img src="https://i.imgur.com/qxhaZOc.png" class="arrow">
        <img class="leaningman" src="https://i.imgur.com/L9zVucE.jpg">
      </div>
    </div>

    <div class="pageright">
      <div class="menucontainer">
        <a href="#" class="animation-trigger" elem="1">Link 1</a>
        <a href="#" class="animation-trigger" elem="2">Link 2</a>
        <a href="#" class="animation-trigger" elem="3">Link 3</a>
        <a href="#" class="animation-trigger" elem="4">Link 4</a>
        <a href="#" class="animation-trigger" elem="5">Link 5</a>
        <a href="#" class="animation-trigger" elem="6">Link 6</a>
        <a href="#" class="animation-trigger" elem="7">Link 7</a>
      </div>
    </div>
  </div>
</div>

标签： javascripthtmlcss

javascript - Javascript - 让手臂指向悬停的元素

问题描述

解决方案

推荐阅读