Javascript 从左向右移动图像_Javascript_Html_Css_Jquery Animate

Javascript 从左向右移动图像

javascript html css

Javascript 从左向右移动图像,javascript,html,css,jquery-animate,Javascript,Html,Css,Jquery Animate,所以我需要帮助，我需要创建一个javascript文件（带有匹配的HTML），允许图像从左到右连续移动。然后，当用户单击鼠标按钮时，图像必须连续上下移动到目前为止，我已经尝试做了第一部分，但是使用一个代码，我发现它不适合我，我也不太确定为什么。我觉得我错过了一些很明显的东西，但我想不出来提前谢谢这是我的密码 HTML： <html> <head> <title>Task 2</title> <link rel="stylesheet"

所以我需要帮助，我需要创建一个javascript文件（带有匹配的HTML），允许图像从左到右连续移动。然后，当用户单击鼠标按钮时，图像必须连续上下移动

到目前为止，我已经尝试做了第一部分，但是使用一个代码，我发现它不适合我，我也不太确定为什么。我觉得我错过了一些很明显的东西，但我想不出来

提前谢谢

这是我的密码

HTML：

<html>
<head>
<title>Task 2</title>
<link rel="stylesheet" type="text/css" href="task2.css">
<script src="task2.js"></script>

<div id="animate">Sample</div>
</head>
</html>

#animate {
    position: relative;
    border: 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

(document).ready(function() {
    var width = (document).width();

    function goRight() {
        ("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        ("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});

JavaScript：

<html>
<head>
<title>Task 2</title>
<link rel="stylesheet" type="text/css" href="task2.css">
<script src="task2.js"></script>

<div id="animate">Sample</div>
</head>
</html>

#animate {
    position: relative;
    border: 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

(document).ready(function() {
    var width = (document).width();

    function goRight() {
        ("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        ("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});

在“单击图像”和“向上向下”功能上添加处理程序：

    function goUp() {
    $("#animate").animate({
    top: 0
  }, 5000, function() {
     setTimeout(goDown, 50);
  });
}
function goDown() {
    $("#animate").animate({
    top: height
  }, 5000, function() {
     setTimeout(goUp, 50);
  });
}
$("#animate").on('click',function(){$('#animate').stop();
              if(upleft == 0)
              {goDown(); upleft=1;}
                                else {goLeft();upleft=0}
})

它不接受它们，控制台返回时会显示未定义的标识符或类似错误，这是因为我已将其保存为.js吗？您还需要加载jquery库。如何添加库？很抱歉，我对jQuery的javascriptIntro很陌生，从jQuery开始：我不知道为什么，但是单击功能不起作用，它可以完美地工作，但在我实现它的时候就不行了？我想你需要添加jQuery脚本，因为我使用过动画功能哦，你还需要将它包装到document.onLoad中。在左菜单的fiddle中，您可以选择插入脚本的位置，如果它只是在头部，那么脚本执行时就没有元素，所以我们需要在加载文档时执行它。