移动图像从左到右javascript

moving image left to right javascript

本文关键字：javascript 从左到右 图像 移动      更新时间：2023-09-26

所以我需要帮助，我需要创建一个javascript文件(与匹配的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>
CSS

: 

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

: 

(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}
})

FIDDLEEXAMPLE

相关文章：