使對象在div換行的約束範圍內移動？

Question

我試圖在用戶導航頁面時按照用戶鼠標製作圖像。有人已經在論壇上討論過這個問題。 Make an image follow mouse pointer。

問題是，我想限制圖像的移動到它所在的div的大小限制。意思是，它跟隨鼠標並繼續跟隨鼠標，但不超出它所在的div的邊界。我試圖擺弄上面提到的解決方案，但無濟於事。你可以做到這一點

（提前道歉，如果這似乎是一個簡單的問題，我還是新的編碼。）

Answer 1

一種方法是檢查鼠標的位置距離格邊界，即如果x位置小於div的寬度減去圖像的寬度（因爲您不希望圖像穿過div的邊框），並且如果y位置小於div的高度減去圖像的高度。 只有當div位於頁面的右上角時，此功能纔有效，因爲我所做的檢查是相對於此角（0 top，0 left）。如果div有邊距（例如100px頂部，100px左邊），那麼您需要檢查相對於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}); 
}); 

我時所做的DIV定位在角落基於例如，你跟着，你可以在這裏看到在的jsfiddle一個例子：JSFiddle

我希望你得到了什麼，我想主要的想法說明。