Question

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

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

我认为我需要根据用户光标方向添加或减去度数（即90 *（oldSection - newSection） - 粗略地说）。但是我在思考这个逻辑时遇到了麻烦。任何人都可以对实现预期效果的最简单，最顺畅的方式有所了解吗？

我的代码可以在http://jsbin.com/qaxikafixa/ - 或低于......

看到

HTML

HttpResponse

CSS

<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

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

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

的

Answer 2

这是一种使用三角法正确旋转的方法。我不是世界上最好的触发器，所以我必须纠正Radians，但它确实使你的代码更具可读性，它实际上更加详细。

我希望这会有所帮助。我可以在这里真正开始解释三角学，但它归结为：你正在寻找的角度是，例如A，你知道的值是x和y（x是鼠标位置减去中心x）。感谢SELECT MAX(DECODE(a.col1,'eid',a.col2 )) eid, MAX(DECODE(a.col1,'name',a.col2 )) name , MAX(DECODE(a.col1,'age',a.col2 )) age FROM (SELECT rownum, last_value(col1 ignore nulls) over (order by rownum) col1, last_value(col2 ignore nulls) over (order by rownum) col2 FROM etest ORDER BY rownum )a;的魔力，我们知道A的窦是SOH CAH TOA，而cosinus是y / (sqrt(x^2 + y^2))。我们真正想要的那个，因为它更简单，就是切线，即x / (sqrt(x^2 + y^2))。如果我们反转这个切线（atan），我们得到角度。现在唯一的问题是我们用弧度得到它，所以我们将它转换回度数并校正鼠标位置以模拟完整的180度。然后我们将位置移动到右边象限。

希望这会有所帮助。如果任何具有更好三角技能的人对此有所改进，请告诉我，因为我想知道它是否可以在没有象限和弧度的校正的情况下完成，但是否则这样做很好并且意味着您不必手动检查每个可能的位置。

＆＃13;

y / x

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: