使用JS移動div內的div

我試圖讓一個「微調」很像csgoempire.com，但我有一些問題（我幾乎全新的JS，我不擅長HTML）。我已經嘗試了一大堆東西，比如爲每張圖片製作一個div，併爲每個圖片分別設置一個JS函數，但經過一番思考後，我意識到它不會很高效，並且很難在以後更改內容。然後我決定爲每張照片製作單獨的div，但將它們全部放在另一個div中，並由JS功能移動。這會使它比以前更有效率，但我似乎無法使其發揮作用，並且有（希望）更好的方式來實現它。編號真的很感激我如何能使其更高效的一些技巧，以及我現在的問題:)使用JS移動div內的div

這裏修復是在其所有的榮耀代碼：

console.log("Connected to server.") 
 

 

 

 
function spin() { 
 
    console.log("Starting Spin."); 
 
    var boxElement = document.getElementById('allBoxes'); 
 
    var pos = 900; 
 
    var id = id; 
 
    setInterval(frame, 1); 
 

 
    function frame() { 
 
    if (pos == 100) { 
 
     clearInterval(id) 
 
    } else { 
 
     pos--; 
 
     boxElement.style.left = pos + 'px'; 
 
    } 
 
    } 
 
}

<div id="allBoxes"> 
 

 
    <div id="box2" style="position:absolute; left:712pt; top:150pt; width:50px; height:50px;"><img src="http://www.theaa.ie/winterhub/wp-content/uploads/2015/12/AA-logo-50x50.png" /></div> 
 
    <div id="box1" style="position:absolute; left:675pt; top:150pt; width:50px; height:50px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAALVBMVEXGAA4fHx////98fHz8/Pzy8vItLS1xcXFnZ2eIiIhdXV2PCxQtHR64Aw9XFRmYSViLAAAAnklEQVRIie2UyQ6DMAxEyZAd2v//3JolAuWQdKyqAok5WDn4ZRQvGYZHj0SmqTsivs71PSS7KBEwJUaX24h3sOGMBAvn2y7RAuOBjICNvbcEAKkgckDoV0wuRkGwWH5R5HRGUr/I2FWff4toun9V5G8VY1upGRh+LPnh16wYv8ia70LR/SsilaaZSN71etNIMaKQzYhDViMWESMauZE+q+cGCDwyhBUAAAAASUVORK5CYII=" 
 
     /></div> 
 

 
    </div> 
 

 

 

 
    <button onclick="spin()"> Click Me! </button>

這是通過只搜索和測試的東西，所以我敢肯定它的瘋狂壞和低效率：P（我甚至不知道它是否有可能做我想做的事情這樣做..）

問題是紡紗工不會旋轉當我將它們分開移動時，確實如此，但當它們都位於div內時不會發生，並且我移動了div。有沒有辦法通過移動其中一個移動多個div？如果你知道更好的方法，那麼你能推薦另一種方法嗎？動態的？

最終目標是從蒸汽中獲取每個用戶的圖像，並在「微調器」中使用這些圖像，製作一個指向中間的箭頭，該箭頭將輸出登陸的用戶的用戶名，並讓「微調器」一旦計時器達到0就開始工作，但現在我只是想學習，而且我認爲最好的學習方法是有一個項目可以工作..（雖然可能選擇了一些困難的項目.. ）

來源

2017-10-10 Kossi

感謝您編輯Temani Afif：* – Kossi

您應該提到你簡單地複製w3school：D然後，即使是錯誤的，你寫道：'var id = id;'這沒有任何意義，它應該是'var id = setInterval（frame，5）;' – Doomenik

你沒救了的間隔，所以你可以阻止它：與解決方案

... 
var pos = 900; 
var id = setInterval(frame, 1); 
function frame() { 
...

發了的jsfiddle：https://jsfiddle.net/bfrhw7rf/1/

考慮使用CSS創建微調，喜歡這裏：https://projects.lukehaas.me/css-loaders/

由於您使用您正在使用一臺運行你的JavaScript單線程一個很短的時間間隔，用CSS你不堵其餘的代碼。

來源

2017-10-10 13:14:45 Nayish

那jsfiddle對我沒有任何幫助..？？而你鏈接的旋轉的東西很酷，但他們甚至沒有接近我想要做的事情。 – Kossi

它的代碼，我只是把它放在jsfiddle上，你需要在控制檯中查看。它說什麼時候停止動畫。 – Nayish

嗯..它沒有解決它，但？當我改變它時，圖片在完成後仍處於相同的位置？ – Kossi

使用JS移動div內的div

回答

相關問題