div邊界jQuery

http://jsbin.com/ofudi4/3/edit div邊界jQuery

你可以自己測試一下這段代碼。

現在我的問題是如果我會有另一個div標籤，就像一個框架。我會如何讓#moveMe移動到frame div中？在每次移動後檢查邊界，因此圖形不會移出框架。

任何現在如何？

編輯：從鏈接添加代碼。

$(document).keydown(function(e){ 
    // Left 
    if (e.keyCode == 37) { 
     $("#moveMe").animate({marginLeft: "-=100px"}, {queue:false}); 
     return false; 
    } 
    // Top 
    if (e.keyCode == 38) { 
     $("#moveMe").animate({marginTop: "-=100px"}, {queue:false}); 
     return false; 
    } 
    // Right 
    if (e.keyCode == 39) { 
     $("#moveMe").animate({marginLeft: "+=100px"}, {queue:false}); 
     return false; 
    } 
    // Bottom 
    if (e.keyCode == 40) { 
     $("#moveMe").animate({marginTop: "+=100px"}, {queue:false}); 
     return false; 
    } 
});

HTML

<body> 
    <div id="moveMe"></div> 
</body>

來源

2010-11-15 Alexander Girndt

如果從動畫保證金動畫左改變，頂部是用.POSITION（）更容易測試條件

測試，如果它比小於零或更大父寬/高 - 它的寬度/高度。

如果不是，像往常一樣設置動畫，如果設置爲邊緣。

你也應該考慮改變緩動，當你保持放鬆時，動作有點奇怪。

if (e.keyCode == 37) { 
    if($("#moveme").position().left >= 100) 
    { 
    $("#moveMe").animate({left: "-=100px"}, {queue:false}); 
    } 
    else 
    { 
    $("#moveMe").animate({left: 0}, {queue:false}); 
    } 
    return false; 
} 

if (e.keyCode == 39) { 
    if($("#moveMe").position().left <= 
     $("#moveMe").parent().width() - $("#moveMe").width() - 100) 
    { 
    $("#moveMe").animate({left: "+=100px"}, {queue:false}); 
    } 
    else 
    { 
    $("#moveMe").animate(
     {left: $("#moveMe").parent().width() - $("#moveMe").width()}, 
     {queue:false}); 
    } 
    return false; 
}

http://jsbin.com/ofudi4/5

來源

2010-11-15 21:18:07 generalhenry

肯定的，但如果我有一個

，這是我想要的。在框架div內。我如何改變寬鬆政策，我承認移動時有點奇怪。 – 2010-11-15 21:27:46

.parent（）應該處理任何父元素。儘管我應該注意到，父元素應該是相對的或絕對定位的，以使事情正常工作。至於easing你會將它添加到選項{隊列：false，easing：'線性'} – generalhenry 2010-11-15 21:34:26

所以基本上我可以直接使用你的代碼，並在moveMe div周圍放一個指定寬度和高度的div，它應該可以工作？ – 2010-11-15 21:38:55

回答

相關問題