javascript - jQuery Compass - 在光标位置旋转的箭头

Question

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

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

我认为我需要根据用户光标方向(即 90 * (oldSection - newSection) - 粗略地说)来增加或减少度数。 但是我在思考逻辑时遇到了麻烦。谁能阐明实现预期效果的最简单、最顺利的方法？

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

---

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>

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

我在javascript中做了一些修改。

请看这个例子:http://jsfiddle.net/kevalbhatt18/dvpss800/

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