Question

我正在尝试在用户鼠标导航页面时跟随用户鼠标。有人已在论坛上发表过这个问题; Make an image follow mouse pointer。

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

（如果这看起来像一个简单的问题，请提前道歉，我还不熟悉编码。）

Answer 1

你可以做的一种方法是检查鼠标的位置是否在div边界内，即x位置是否小于div的宽度减去图像的宽度（因为你没有＆＃39） ;;如果y位置小于div的高度减去图像的高度，则希望图像穿过div的边界。仅当div位于页面的右上角时才有效，因为我所做的检查是相对于此角落的（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放在角落里，你可以在这里看到：JSFiddle

我希望你能解释我试图解释的内容。

使一个对象在div包裹的约束内移动？

1 个答案: