jQuery指南针-在光标位置旋转的箭头

Question

我试图在HTML和jQuery中创建一个“指南针样式”圆圈，其中箭头旋转到圆圈的一个新部分，这取决于用户光标的位置。

我有非常基本的设置，但是我有一个由旋转和CSS转换引起的小错误。事情看起来很好，直到你试图移动之间的最后一节和第一节，因为旋转是从一个较高的数字，一直到-45。

我认为我需要根据用户的光标方向(即90 * (oldSection - newSection) -粗略地说)来加或减度。然而，我很难从逻辑上思考。有人能说明最简单和最顺利的方法来达到预期的效果吗？

我的代码可以在http://jsbin.com/qaxikafixa/上看到-或者在下面.

<div class="compass_container">
  <a id="square-1" class="square" href=""></a>
  <a id="square-2" class="square" href=""></a>
  <a id="square-3" class="square" href=""></a>
  <a id="square-4" class="square" href=""></a>
  <span class="arrow"></span>
</div>

CSS

.compass_container {
  position: absolute;
  width: 300px;
  height: 300px;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  overflow: hidden;
}

.compass_container .square {
  background-color: red;
  display: inline-block;
  width: 50%;
  height: 150px;
  float: left;
}

.compass_container .square:nth-child(2) {
  background-color: blue;
}

.compass_container .square:nth-child(3) {
  background-color: green;
  float: right;
}

.compass_container .square:nth-child(4) {
  background-color: orange;
}

.arrow {
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
  border-bottom: 60px solid white;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transform: rotate(320deg);
-webkit-transition: transform .25s ease;
     -moz-transition: transform .25s ease;
      -ms-transition: transform .25s ease;
       -o-transition: transform .25s ease;
          transition: transform .25s ease;
  }

Javascript

jQuery(document).ready(function($) {

  $(window).on('mousemove', function(event) {

    var mouseX = event.pageX;
    var mouseY = event.pageY;

    var arrow = $('.arrow');

    if (mouseX > $('#square-2').offset().left) {

      if (mouseY > $('#square-4').offset().top) {

        $(arrow).css({
          transform: 'rotate(135deg)'
        });

      } else {

        $(arrow).css({
          transform: 'rotate(45deg)'
        });

      }

    } else {

      if (mouseY > $('#square-3').offset().top) {

        $(arrow).css({
          transform: 'rotate(-135deg)'
        });

      } else {

        $(arrow).css({
          transform: 'rotate(-45deg)'
        });

      }

    }

  });

});

Answer 1

这是一种利用三角学来正确旋转的方法。我不是世界上最优秀的trig，所以我不得不对Radians进行修正，但是它确实使您的代码更加可读性更强，而且它实际上可以更详细地工作。

我希望这能帮到你。我不能在这里解释三角学，但实际上是这样的:你正在寻找的角度是，例如A，你知道的值是x和y (x是鼠标位置减去中心x)。由于SOH CAH TOA的魔力，我们知道A的窦是y / (sqrt(x^2 + y^2))，而宇宙是x / (sqrt(x^2 + y^2))。我们真正想要的，因为它更简单，是切线，也就是y / x。如果我们逆这个切线(atan)，我们得到这个角度。现在唯一的问题是，我们得到它的弧度，所以我们把它转换回度，并纠正鼠标的位置，以模拟完整的180度。然后我们把位置移到右边象限。

希望这能有所帮助。如果谁有更好的三角学技能有改进，请告诉，因为我想知道是否有可能做到这一点，如果没有校正象限和弧度在最后，但否则这是很好的工作，意味着你不需要手动检查每一个可能的位置。

​

jQuery(document).ready(function($) {
  
  $(window).on('mousemove', function(event) {
    
    
    var c = $("#compass");
    /*  . Mouse
     *  |\
     *  | \
     * y|  \
     *  |   \
     *  |____\. center of compass
     *     x
     */
    var x = c.offset().left + c.innerWidth() / 2 - event.pageX;
    var y = c.offset().top + c.innerHeight() / 2 - event.pageY;
    
    // Use the atan function to get the angle back 
    var angle = Math.atan(y / x) * 180 / Math.PI;
    
    // Correct for radians by adding one radian when we are further to the right
    // Also, correct for the angle's wrong quadrant
    angle = event.pageX > c.offset().left + c.innerWidth() / 2 ? angle + 90 : angle - 90;
    
    var arrow = $('.arrow').css({transform: 'rotate(' + (angle) + 'deg)'});
    
  });
  
});

.compass_container {
  position: absolute;
  width: 300px;
  height: 300px;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  overflow: hidden;
}

.compass_container .square {
  background-color: red;
  display: inline-block;
  width: 50%;
  height: 150px;
  float: left;
}

.compass_container .square:nth-child(2) {
  background-color: blue;
}

.compass_container .square:nth-child(3) {
  background-color: green;
  float: right;
}

.compass_container .square:nth-child(4) {
  background-color: orange;
}

.arrow {
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
  border-bottom: 60px solid white;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transform: rotate(320deg);
-webkit-transition: transform .25s ease;
     -moz-transition: transform .25s ease;
      -ms-transition: transform .25s ease;
       -o-transition: transform .25s ease;
          transition: transform .25s ease;
  }

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="compass_container" id="compass">
  <a id="square-1" class="square" href=""></a>
  <a id="square-2" class="square" href=""></a>
  <a id="square-3" class="square" href=""></a>
  <a id="square-4" class="square" href=""></a>
  <span class="arrow"></span>
</div>
</body>
</html>

​