jquery - 使对象在 div 换行的约束范围内移动？

Question

我试图让图像在用户浏览页面时跟随鼠标移动。有人已经在论坛上解决了这个问题； Make an image follow mouse pointer .

问题是，我想将图像的移动限制在它所在的 div 的大小限制内。意思是，它跟随鼠标并继续跟随鼠标，但不会超出它所在的 div 的边界。我试图摆弄上面链接的解决方案，但无济于事。

(如果这看起来是一个简单的问题，请提前致歉，我对编码还是个新手。)

Answer 1

您可以这样做的一种方法是检查鼠标的位置是否在 div 边界内，即 x 位置是否小于 div 的宽度减去图像的宽度(因为您不希望图像越过 div 的边界)并且如果 y 位置小于 div 的高度减去图像的高度。仅当 div 位于页面的右上角时才有效，因为我所做的检查是相对于此 Angular (0 顶部，0 左侧)。如果 div 有边距(例如 100px top，100px left)那么你需要检查上面相对于 div 位置的条件，你需要添加两个类似的条件来检查鼠标指针是否越过上边界和右边框。

根据您所遵循的示例，此代码为:

HTML

<div id="constraint">
    <img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG"/>
</div>

CSS

#image{
position:absolute;
}

#constraint {
    height: 400px;
    width: 500px;
    border: 1px solid black;
}

JS

$(document).mousemove(function(e){
    var constraint = $('#constraint');
    var width = constraint.width();  // get the width of the div
    var height = constraint.height();  // get the height of the div

    var image = $("#image");

    if (e.pageX < width - image.width() && e.pageY < height - image.height()) 
        // if conditions are satisfied
        image.css({left:e.pageX, top:e.pageY});
});

我在 jsfiddle 中做了一个例子，根据你遵循的例子，当 div 位于 Angular 落时，你可以在这里看到:JSFiddle

我希望您能理解我试图解释的内容的主要思想。