javascript - 使用Javascript onclick移动图像？

我有一个网页，其中包含图片和一些链接。每个链接在单击时执行不同的功能。

单击某个链接后，我将调用一个名为move的函数。单击此链接后，我需要图像（bird）向右移动20px。

到目前为止，我的函数如下所示：

function move(e) {
   bird.style.position = "relative";
   bird.style.left += "20px";
   e.preventDefault();     //prevents the page from redirecting
}

这有效，但是只有一次。当我单击链接时，bird将向右移动20px，但这只会发生一次。每次点击链接，我都需要将照片再移动20像素。一位朋友告诉我“在添加之前先解析”，但我不确定它们的含义。我应该解析什么？任何建议/帮助都非常感谢。谢谢！

最佳答案

开始了：

HTML：

<div id="block"></div>
<button id="go">&raquo; Run</button>

jQuery的：

$("#go").click(function(){
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
    if (dest > 500) {
        $("#block").animate({
            marginLeft: "10px"
          }, 500 );
    }
    else {
      $("#block").animate({
        marginLeft: dest + "px"
      }, 500 );
    }
});

CSS：

div { width: 20px; height: 20px; background: green; margin: 10px; }

希望能帮助到你;）

http://jsfiddle.net/schadeck/ptGws/

关于javascript - 使用Javascript onclick移动图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36900540/