需要关于不带jQuery的JavaScript动画的帮助吗_Javascript

需要关于不带jQuery的JavaScript动画的帮助吗

javascript

需要关于不带jQuery的JavaScript动画的帮助吗,javascript,Javascript,例如，我有一个div对象（简单图像），我需要我的图片在没有任何帧和边框的情况下向左、向右和向后移动。我的图片将与结尾（页面的右侧）发生碰撞，并向后移动到左侧，然后再与右侧发生碰撞。这将仅在JavaScript上进行编辑： <html> <head> <script> function dvig () { var xx = 50; var corner_left=200 +'px'; var corner_right=100 +

例如，我有一个div对象（简单图像），我需要我的图片在没有任何帧和边框的情况下向左、向右和向后移动。我的图片将与结尾（页面的右侧）发生碰撞，并向后移动到左侧，然后再与右侧发生碰撞。这将仅在JavaScript上进行

编辑：

<html>
<head>
<script> 
function dvig () { 
    var xx = 50; 
    var corner_left=200 +'px'; 
    var corner_right=100 +'px'; 
    var move; var move2; 
    var dv=document.getElementById("adam"); 
    if(dv.style.left<=corner_right) { 
        move=1; 
        move2=1; 
    } 
    if(dv.style.left>=corner_left) {
        move2=0; 
        move=0; 
    } 
    if(move=1) { 
        dv.style.left=parseInt(document.getElementById("adam").style.left)+xx; 
    } 
    if (move2=0) { 
        move=0; 
        dv.style.left=parseInt(document.getElementById("adam").style.left)-xx; 
    } 
} 
function chustro() { 
    setInterval("dvig()", 100); 
} 
</script> 
</head>
<body onload="chustro()">
    <img id="adam" style="position: absolute; top: 100px; left: 100px; width: 40px; height: 40px; background-color: red">
</body>
</html>


函数dvig（）{
var xx=50；
var角_左=200+'px'；
var角点_右=100+'px'；
var移动；var移动2；
var dv=document.getElementById（“adam”）；
if（dv.style.left=左角）{
move2=0；
move=0；
} 
如果（move=1）{
dv.style.left=parseInt（document.getElementById（“adam”）.style.left）+xx；
} 
如果（move2=0）{
move=0；
dv.style.left=parseInt（document.getElementById（“adam”）.style.left）-xx；
} 
} 
函数chustro（）{
设置间隔（“dvig（）”，100）；
}

您必须设置一个每X毫秒运行一次的迭代过程。每次它运行时，你必须更新一点div的位置，并检查它是否击中一侧和反向

function doWork{
    // move current direction a little

    // check if past the left edge and change directions

    // check if past the right edge and change direction
}

setInterval(doWork, 10);

更新：

<html>
<head>
<script> 
function dvig () { 
    var xx = 50; 
    var corner_left=200 +'px'; 
    var corner_right=100 +'px'; 
    var move; var move2; 
    var dv=document.getElementById("adam"); 
    if(dv.style.left<=corner_right) { 
        move=1; 
        move2=1; 
    } 
    if(dv.style.left>=corner_left) {
        move2=0; 
        move=0; 
    } 
    if(move=1) { 
        dv.style.left=parseInt(document.getElementById("adam").style.left)+xx; 
    } 
    if (move2=0) { 
        move=0; 
        dv.style.left=parseInt(document.getElementById("adam").style.left)-xx; 
    } 
} 
function chustro() { 
    setInterval("dvig()", 100); 
} 
</script> 
</head>
<body onload="chustro()">
    <img id="adam" style="position: absolute; top: 100px; left: 100px; width: 40px; height: 40px; background-color: red">
</body>
</html>

根据您的代码，检查以下示例：

听起来像是我的家庭作业。你能给我一个不使用现有库的好理由吗？Dat Chu先生，我只需要javascript，我正在学习javascript，当我完成这项任务时，我犯了一个错误，我将发布我编写的代码，但我对页面函数dvig（）的边框有问题{var xx=50；var corner_left=200+'px'；var corner_right=100+'px'；var move；var move2；var dv=document.getElementById（“adam”）；if（dv.style.left=corner_left）{move2=0；move=0；}if（move=1）{dv.style.left=parseInt（document.getElementById（“adam”）.style.left）+xx；}if（move2=0）{move=0；dv.style.left=parseInt（document.getElementById（“adam”）.style.left）-xx；}}函数chustro（）{setInterval（“dvig（）”，100）；}我这里有个错误，请帮助我解决这个问题Justin先生，你能看看我的javascript代码并写下问题所在吗？