Javascript 如何让球左右移动?
我让球斜向移动。我需要让它以每次更新2像素的速度左右移动。当它达到800像素的权利,我需要让它向左移动 Css代码Javascript 如何让球左右移动?,javascript,html,css,animation,Javascript,Html,Css,Animation,我让球斜向移动。我需要让它以每次更新2像素的速度左右移动。当它达到800像素的权利,我需要让它向左移动 Css代码 <style> #animationArea { width: 400px; height: 300px; overflow: hidden; border: 1px solid #000; position: relative; } .pbox { width: 20px; height: 20px; position: absolu
<style>
#animationArea {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #000;
position: relative;
}
.pbox {
width: 20px;
height: 20px;
position: absolute;
background-color: #FF0000;
border-radius: 25px;
}
</style>
var dvAnimationArea = document.querySelector("#animationArea");
//create the 'ball' for this animation
var ball = document.createElement('div');
ball.classList.add('pbox');
dvAnimationArea.appendChild(ball);
//position for our 'ball'
var x = 0;
var y = 0;
//start the animation interval
setInterval(update, 30);
function update() {
ball.style.top = y + "px";
ball.style.left = x + "px";
x++;
y++;
}
我完全漏掉了JS。 这将一次为球设置2px的动画。 我可以在香草js上做这个,如果你喜欢的话,点击一下,让它停在悬停等等。 只要让我知道目标是什么,动画需要多长时间
.pbox {
width: 20px;
height: 20px;
position: absolute;
background-color: #FF0000;
border-radius: 25px;
animation:hello 5s infinite steps(400, end);}
让我知道你想让容器的宽度达到400px,这不是打字错误吗?容器的大小其实并不重要,我把它扩展到我的容器上,使其达到800px,这样我就可以看到球,但我想我需要使用JS,因为我假设使用一个DOM元素。告诉我,球必须动态创建吗?如果没有,我很高兴:-)可以使用css吗?你需要在点击时触发它吗?你想在悬停或点击某个元素时使用动画停止功能吗?jQuery还是vanilla JS?动画需要多长时间?球最初应该显示在哪里?@jjdouble000我已经用纯JS为您更新了那里的代码。将鼠标悬停在animationArea上时,动画开始。单击按钮,您可以停止它,再次单击,它将从开始的位置继续。不客气,顺便说一句,我更改了querySelector只是因为当我们已经有了ID时,最好使用getElementById。不是因为浏览器支持,这个动画在这么多IE版本中都不起作用,哈哈,在新版本中应该可以,不过:-)谢谢!我现在拿到了。