jquery - 当跟随光标移动时，如何设置希望我的 child 移动的边框？

Question

我正在制作一个项目，其中我必须在 jQuery 中向脸部添加一些粘糊糊的眼睛。我有 CSS 设计和 HTML 设计，现在我想用 Jquery 添加鼠标移动。我在这个网站上找到了一个非常有用的答案，我设法让学生跟随光标，但它们在屏幕上移动，而不仅仅是在眼球中移动。我搜索了具有相同结果的代码，但它们要么是 javascript 代码，要么是通过 CSS 中的悬停进行移动。对我来说，这看起来很复杂，所以我想我可以在这里问是否有人知道如何定义我希望学生移动的区域。就我而言，我希望瞳孔右/左分别在div内移动:#leftEye #rightEye，而不是遍布屏幕。

$(document).ready(function() {

                var leftPupil = $("<div><div>");

                $("#leftye").append(leftPupil);

                var rightPupil = $("#rightEye div div");
                $("#rightEye").append(rightPupil);
                rightPupil.show();

                $(window).on('mousemove', function(e){
                pupilleLinks.css({
                left:  e.pageX,
                top:   e.pageY
                });
                pupilleRechts.css({
                left:  e.pageX,
                top:   e.pageY
              });
           });
        });

        </script>
</head>
<b
    <div style="float:left;font-weight:bold;">Deine Spielwiese:</div>

    <div id="face">
        <div id="leftEye">Left Eye</div>
        <div id="rightEye" >Right Eye<div>
                <span></span>
                <div style="display:none;background-color:#000;width:20px;height:20px;border-radius:10px;position:absolute;bottom:10px;lef:10px;"></div>
            </div>
        </div>
        <div style="display:none;border:1px solid green;width:35px;height:35px;margin-top:70px; display: inline-block; border-radius:35px;background-color:#DFD;"></div

我没有复制所有 CSS 部分，因为它很长。如果有人知道我如何定义所需的运动区域，那就太好了。

Answer 1

你的代码根本不起作用，所以我首先误解了你的意思。我无法从你损坏的代码中学到太多东西，所以我很快重写了它。

每只眼睛的标记:

<div class="eye">
    <div class="roller">
        <div class="pupil"></div>
    </div>
</div>

你应该做的是:

• 计算鼠标到眼睛中心的距离
• 将距离限制在眼睛半径范围内
• 计算鼠标与眼睛中心形成的线的角度
• 将 .pupil 设置为距中心正确的距离并旋转 .roller 元素

这是带有一些更详细解释的 fiddle :https://jsfiddle.net/ilpo/zyx0ag9z/1/

此外，它适用于任何数量、任何尺寸的眼睛:https://jsfiddle.net/ilpo/zyx0ag9z/3/ 您只需更改眼睛的高度和宽度 - 瞳孔的大小和其他所有内容都会自动缩放!