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

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

我有非常基本的设置，但是我有一个由旋转和CSS转换引起的小错误。在你尝试在最后一节和第一节之间移动之前，一切看起来都很顺利，因为旋转从一个更高的数字一直跳到-45

我想我需要根据用户光标的方向（即90*（oldSection-newSection）——粗略地说，增加或减少度数。 然而，我很难通过逻辑来思考。有谁能解释一下最简单、最顺利的方法来达到想要的效果

我的代码可以在-或下面看到

---

HTML

<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>

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

      }

    }

  });

});

---

这里有一个方法来获得正确的旋转使用三角学。我不是世界上最好的三角，所以我必须修正弧度，但它确实使你的代码更可读，而且它实际上工作得更详细

我希望这有帮助。我可以；在这里，我们不能真正开始解释三角学，但它可以归结为：你要寻找的角度是，例如A，你知道的值是x和y（x是鼠标位置减去中心x）。多亏了

sohcahtoa

的魔力，我们知道A的窦是

y/（sqrt（x^2+y^2））

，余弦是

x/（sqrt（x^2+y^2））

。我们真正想要的是切线，因为它更简单，它是

y/x

。如果我们逆这个切线（atan），我们得到角度。现在唯一的问题是我们以弧度为单位，所以我们将其转换回度，并校正鼠标位置以模拟180度。然后我们把位置移到右象限

希望这有帮助。如果有人有更好的三角技巧，请告诉我，因为我想知道是否有可能做到这一点，而不纠正象限和弧度在最后，但否则，这只是罚款，意味着你不必手动检查每一个可能的位置

jQuery（文档）.ready（函数（$）{
$（窗口）.on（'mousemove'，函数（事件）{
var c=$（“指南针”）；
/*.老鼠
*  |\
*  | \
*y|\
*  |   \
*罗盘中心
*x
*/
var x=c.offset（）.left+c.innerWidth（）/2-event.pageX；
变量y=c.offset（）.top+c.innerHeight（）/2-event.pageY；
//使用atan函数返回角度
变量角度=数学atan（y/x）*180/数学PI；
//当我们进一步向右时，通过添加一个弧度来校正弧度
//此外，请更正角度的错误象限
角度=event.pageX>c.offset（）.left+c.innerWidth（）/2？角度+90：角度-90；
var arrow=$（'.arrow'）.css（{transform:'rotate（'+（角度）+'deg）}）；
});
});
.compass\u容器{
位置：绝对位置；
宽度：300px；
高度：300px；
显示：内联块；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
-webkit边界半径：50%；
溢出：隐藏；
}
.compass_集装箱。方形{
背景色：红色；
显示：内联块；
宽度：50%；
高度：150像素；
浮动：左；
}
.compass_容器。方形：第n个子（2）{
背景颜色：蓝色；
}
.compass_容器。方形：第n个子（3）{
背景颜色：绿色；
浮动：对；
}
.compass_容器。方形：第n个子（4）{
背景颜色：橙色；
}
.阿罗{
宽度：0；
身高：0；
位置：绝对位置；
顶部：钙（50%-30px）；
左：计算（50%-20px）；
边框底部：60px纯白；
左边框：20px实心透明；
右边框：20px实心透明；
变换：旋转（320度）；
-webkit过渡：转换。25秒轻松；
-moz过渡：转换。25秒轻松；
-ms转换：转换。25秒轻松；
-o型过渡：转换。25秒轻松；
转型：转型。25秒轻松；
}

JS-Bin
我在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)'
        });

      }

    }

  });

});

var img = $('.arrow');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.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; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}