如何使用javascript平滑地移动图像？_Javascript_Html_Css

如何使用javascript平滑地移动图像？

javascript html css

如何使用javascript平滑地移动图像？,javascript,html,css,Javascript,Html,Css,我想在javascript中使用while循环移动图像，但它不起作用这是javascript代码： var i = 0; while(i != 1000){ document.getElementById("poza").style.left= i; i = i + 20; } css代码： #poza{ position: absolute; left: 0px; width: 500px; height: auto; } 以

我想在javascript中使用while循环移动图像，但它不起作用

这是javascript代码：

var i = 0;

while(i != 1000){
  document.getElementById("poza").style.left= i;
  i = i + 20;
}

css代码：

#poza{
    position: absolute;
    left: 0px;
    width: 500px;
    height: auto;
}

以及html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">
    
</head>
<body>
    
 <img id="poza" src="ali_si_david_camp.jpg" alt="ali_si_david_camp">

 <script src="index.js"></script>
</body>
</html>


文件

样式。左

通常需要包含单位的字符串。试试这个

document.getElementById("poza").style.left = `${i}px`;

你刚才给了一个整数

此外，我不认为会有太多的平滑移动涉及，因为循环将最有可能立即完成。因此，我会读入带有

关键帧的css动画

样式。左

通常需要一个包含单位的字符串。试试这个

document.getElementById("poza").style.left = `${i}px`;

你刚才给了一个整数

此外，我不认为会有太多的平滑移动涉及，因为循环将最有可能立即完成。因此，我将阅读带有

关键帧的css动画

您也可以尝试这种方法

var i=0；
变量计时器=设置间隔（（）=>{
document.getElementById（“poza”）.style.left=i+'px'；
i=i+1
如果（i>1000）{
清除间隔（计时器）；
}
}，30）

#poza{
位置：绝对位置；
左：0px；
宽度：500px；
高度：自动；
}


文件

您也可以尝试这种方法

var i=0；
变量计时器=设置间隔（（）=>{
document.getElementById（“poza”）.style.left=i+'px'；
i=i+1
如果（i>1000）{
清除间隔（计时器）；
}
}，30）

#poza{
位置：绝对位置；
左：0px；
宽度：500px；
高度：自动；
}


文件

Javascript是单线程的—在您的案例中，这意味着Javascript指令之间不会发生任何事情

根据这一准则判断：

var i = 0;

while(i != 1000){
  document.getElementById("poza").style.left= i;
  i = i + 20;
}

我怀疑您希望每次修改

时都会有

1000/20

图形更新。但是javascript是单线程的；此循环运行时不会发生任何其他情况，包括图形更新！结果是您的循环将运行

1000/20次

，只有这样才有可能进行图形更新

为了允许图形更新，您需要在每次执行更新时停止循环运行一段时间。一个很好的方法是使用

async

wait

。以下循环在每个步骤后暂停150ms：

（异步（）=>{
设i=0；
而（i！=1000）{
document.getElementById（“poza”）.style.left=`${i}px`；
i=i+20；
//暂停150毫秒
等待新的承诺（r=>setTimeout（r，150））；
}
})();
#poza{
位置：绝对位置；
左：0；顶部：40%；高度：10%；宽度：20px；
背景色：#f00；
}
Javascript是单线程的-在您的案例中，这意味着Javascript指令之间不会发生任何事情
根据这一准则判断：
var i = 0;

while(i != 1000){
  document.getElementById("poza").style.left= i;
  i = i + 20;
}

我怀疑您希望每次修改I
时都会有1000/20
图形更新。但是javascript是单线程的；此循环运行时不会发生任何其他情况，包括图形更新！结果是您的循环将运行1000/20次
，只有这样才有可能进行图形更新
为了允许图形更新，您需要在每次执行更新时停止循环运行一段时间。一个很好的方法是使用async
/wait
。以下循环在每个步骤后暂停150ms：

（异步（）=>{
设i=0；
而（i！=1000）{
document.getElementById（“poza”）.style.left=`${i}px`；
i=i+20；
//暂停150毫秒
等待新的承诺（r=>setTimeout（r，150））；
}
})();
#poza{
位置：绝对位置；
左：0；顶部：40%；高度：10%；宽度：20px；
背景色：#f00；
}
setInterval
不是实现平滑的正确工具motion@Gershy最好是使用CSS关键帧，但这与他试图实现的方法最接近。setInterval
不是实现平滑的正确工具motion@Gershy最好是使用CSS关键帧，但这与他尝试的方法最接近使生效