使用JavaScript將div/moving div重新定位到左側和右側

我是JavaScript新手，我試圖啓動一個非常簡單的項目，它顯示一個可控制的div，可以使用a，w，s，鍵盤上的d鍵。我目前在如何移動div方面遇到問題，因爲我不知道要更改哪個屬性。使用JavaScript將div/moving div重新定位到左側和右側

divBar = null; 

function detectKey() { 
    //97 = a 
    //115 = s 
    //100 = d 
    //119 = w 

    if (event.charCode == 97) { 
     //a 
     alert(divBar.position); 
    } 
    if (event.charCode == 115) { 
     //s 
    } 
    if (event.charCode == 100) { 
     //d 
    } 
    if (event.charCode == 119) { 
     //w 
    } 
} 

function createDiv() { 
    divBar = document.createElement("div"); 
    divBar.id = "divBar"; 
    divBar.style.border = "solid 1px #AAAAAA"; 
    divBar.style.backgroundColor = "black"; 
    divBar.style.top = 400; 
    divBar.style.height = "10px"; 
    divBar.style.width = "100px"; 
    divBar.style.position = "absolute"; 
    document.body.appendChild(divBar); 
    document.addEventListener("keypress", detectKey, false); 

}

我不確定把這個條件聲明。這樣div就會向左，向右，向上和向下移動。

來源

2011-07-10 denniss

如果它絕對定位（它似乎是），那麼您可以更改divbar.style.top和divbar.style.left來移動它。

下面是一個工作示例：http://jsfiddle.net/jfriend00/rRbZz/。

來源

2011-07-10 01:05:33 jfriend00

嘗試過了，它似乎沒有工作=（ – denniss

在這裏工作：http://jsfiddle.net/jfriend00/rRbZz/您的代碼包含了一些錯誤，你可以看到在我的jsfiddle固定代碼。 – jfriend00

由於它絕對定位，你很可能會想要改變它的頂部/左側樣式屬性。它將涉及讀取當前的頂部/左側屬性，然後在按下a，w，s，d鍵之後添加/刪除它們，然後再添加該值。因此，對於每個關鍵/方向，您都必須弄清楚對元素有什麼影響。它會向上/向下移動（影響頂部屬性）還是向左/向右移動（影響左側屬性）。閱讀那裏的內容，進行適當的計算，並更新屬性。最棘手的部分是讀取最初的style.top/style.left屬性，但是因爲你正在用Javascript設置它們，所以你應該沒有問題。

來源

2011-07-10 01:08:42 thescientist

使用JavaScript將div/moving div重新定位到左側和右側

回答

相關問題