Question

我正在尝试创建跟随光标移动的眼睛。我得到了鼠标的水平和垂直坐标以及浏览器的宽度和高度。一切正常。除了我在眼睛的设计上使用了rotate(45 deg)之外，现在球没有在正确的位置移动。

我当时在考虑一个数学方程式，该数学方程式可以找到新旧坐标之间的距离，但是我不确定如何实现它。

这是完整的代码： https://jsfiddle.net/Mr_MeS/3ym6kuec/3/

所以这是旋转的.eye

.eye {
    width: 37.5px;
    height: 37.5px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 75% 0;
    overflow: hidden;
    cursor: pointer;
}

.ball {
    width: 7.5px;
    height: 7.5px;
    background: #222f3e;
    border-radius: 50%;
    border: 5px solid #576574;
    position: relative;
    top: 50%;
    left: 50%;
}

这是完成工作且需要编辑的JS。

var balls = document.getElementsByClassName("ball");
document.onmousemove = function () {

    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    //event.clientX => get the horizontal coordinate of the mouse
    //event.clientY => get the Vertical coordinate of the mouse
    //window.innerWidth => get the browser width
    //window.innerHeight => get the browser height


    for (var i = 0; i < 2; i++) {
        balls[0].style.left = x;
        balls[0].style.top = y;
        balls[0].style.transform = "translate(-" + x + ",-" + y + ")";
    }
}

现在，如果我从.eye移除旋转，则旋转效果非常好，请期望整个形状看起来都没有定位。

如果我保持45度旋转，形状会很好，但是球会错误地移动。

Answer 1

您可以尝试将眼睛背景（需要旋转45度的白色部分）放入.eye元素内的div（或伪元素）中。这样，您无需旋转容器元素，因此球形元素的协调性保持不变。

另一点，为什么要使用该for循环？我认为只运行一次代码就足够了：）

编辑：我一直在研究您的示例并进行修复。发生的事情是，如果旋转一个元素，事物变换的方向（以及顶部/左侧位置）也会改变。因此，将元素向左移动10px，将在45度角下向左移动10px，因为它已旋转了45度。

我现在要做的是将一个元素（.inner）放入眼睛div内，我进行了-45度的反向旋转。这样，球的容器元素再次具有正确的方向，从而解决了问题：https://jsfiddle.net/bxprjvgL/

HTML：

<div class="eye">
    <div class="inner">
      <div class="shut"><span></span></div>
      <div class="ball"></div>
    </div>
</div>

CSS：

.inner {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}

旋转对象后如何调整鼠标位置？

1 个答案: