使用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

回答

相关问题