如何设置 children 在跟随光标移动时移动的边界？

Question

我正在制作一个项目，我必须在 jQuery 中的一张脸上添加一些眼睛。我在 CSS 中有设计，在 HTML 中有我的 div 我现在想用 Jquery 添加鼠标移动。我在这个网站上找到了一个非常有用的答案，我设法让学生跟随光标移动，但他们在整个屏幕上移动，而不仅仅是在眼球中。我搜索了具有相同结果的代码，但它们要么是 javascript 代码，要么是悬停在 CSS 中进行的移动。对我来说，这看起来很复杂，所以我想我可以在这里问问是否有人知道如何定义我希望学生移动的区域。在我的例子中，我希望 pupilsRight/Left 分别在 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/ 您只需更改眼睛的 height 和 width - 瞳孔的大小和其他所有内容都会自动缩放！

Answer 2

几年前，我为 googly eyes 制作了一个 jQuery 插件（http://my.krzysiu.net/googl/ - 演示和手册）。由于代码不长，我把它贴在这里。我从来没有真正完成它，所以它有一些小错误，但它似乎工作得很好并且它结合了一些技巧使运动看起来真实（主要是延迟和非线性动画）。您可以使用它或将基本思想合并到您的代码中。思路是：

我们需要极坐标（角度和距离）来放置，CSS 使用笛卡尔坐标（X/Y 或 top/left）。
我们知道眼睛中心和鼠标指针的笛卡尔坐标。我们使用三角函数转换笛卡尔=>极坐标。
我们还知道眼睛中心与虹膜中心的夹角(α₁)必须与眼睛中心与指针中心的夹角相同(图. 1).
我们有角度，现在我们需要距离。它不能低于 0（眼睛中间），但不能高于眼睛半径减去虹膜的眼睛（因为如果它更大，虹膜就会在眼睛外面；见图 1）。 2).如果我们的距离 eye<->pointer 小于我们的 r₁-r₂ （即鼠标悬停在眼睛上方）我们使用该距离。如果它更高（鼠标在眼睛外面），我们将其设置为我们的限制。
由于我们有眼睛中心到虹膜中心的角度和距离，我们可以将其转换回笛卡尔坐标，因此我们可以设置虹膜的位置。这些将是相对坐标，因此要么使用相对 CSS 定位，要么使用绝对 - x_final=x₁+x₂ 其中 x₁ 是我们的结果，x₂ 是眼睛中心的绝对位置。

我一直重复“中心”，因为我们希望虹膜在眼睛内部，而使用角会给我们错误的视觉解释。

(function ($) {

$.fn.googly = function(settings) {
    var conf = $.extend({
        container: false,
        trigger: false,
        x: 0,
        y: 0,
        distance: 10,
        minDelay: 250,
        moveTime: 200,
        moveType: 'swing',
        callbackOnResize: true
    }, settings);
    
    var obj = $(this);
    if (conf.container === false) conf.container = obj.parent();
    if (conf.trigger === false) conf.trigger = conf.container;      
    var box = conf.container;
    var x = 0;
    var y = 0;
    
    var setSize = function() {
        x = -(obj.outerWidth(false)/2);
        y = -(obj.outerHeight(false)/2);
        if (typeof(conf.x) == 'function') x += conf.x.call(); else x += conf.x;
        if (typeof(conf.y) == 'function') y += conf.y.call(); else y += conf.y; 
        obj.css({left: x, bottom: y});          
    }
    
    
    
    setSize.call();
    
    var canAnimate = true;
    
    if ((typeof(conf.x) == 'function' || typeof(conf.y) == 'function') && conf.callbackOnResize) {          
        $(window).resize(function() {
            setSize.call();
        });         
        
    }   
    conf.trigger.mousemove(function(e) {
        if (!canAnimate || obj.is(':animated')) return;
        
        var x2 = e.pageX - box.offset().left - (obj.outerWidth(false)/2);
        var y2 = box.offset().top + box.height() - e.pageY - (obj.outerHeight(false)/2);
        var angle = Math.atan(Math.abs(y2 - y) / Math.abs(x2 - x));
        var dX3 = conf.distance * Math.cos(angle);
        var dY3 = conf.distance * Math.sin(angle);
        var mX = x > x2 ? x-dX3 : x+dX3;
        var mY = y > y2 ? y-dY3 : y+dY3;
        
        obj.animate({left:mX, bottom: mY}, conf.moveTime, conf.moveType);
        window.setTimeout(function() {canAnimate = true;}, conf.minDelay);
        canAnimate = false;
    });
    return this;        
};  
}(jQuery));

如何设置 children 在跟随光标移动时移动的边界？

How do I set the borders in which I want my children to move when following the cursor on a movement?

jquery

parent-child

mouseover

area