Question

我有一个包含图片和链接的网页。点击后，每个链接都执行不同的功能。

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

到目前为止，我的功能看起来像这样：

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

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

Answer 1

我们走了：

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/

Answer 2

您可以向链接添加事件侦听器，然后使用tranform: translateX(20px) CSS规则移动元素。 translateX会将元素从当前页面上的位置移开。

＆＃13;

var bird = document.getElementById("img");
var link = document.getElementById("link");
link.addEventListener("click", move);

var birdX = 0;
function move(e) {
   birdX += 20;
   bird.style.position = "relative";
   bird.style.transform = "translateX(" + birdX + "px)";
   e.preventDefault();     //prevents the page from redirecting
}

＆＃13;

div{ /*just for effect*/ 
  border:1px solid brown; 
  display:inline-block;
}
a{
  cursor:pointer;
  text-decoration:underline;
}

＆＃13;

<div id="img">bird</div>
<br>
<a id="link">Link</a>

＆＃13;

Answer 3

function move(e) {
   var left = parseInt(bird.style.left);

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

这是最接近原始代码但我不太喜欢它。我更喜欢这样的东西：

var offsetLeft = 0;

function move(e) {
   offsetLeft += 20;

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

但这确实创造了一个额外的变量，一个世界！

Answer 4

bird.style.left += "20px"只会运行一次，因为您正在构建一个字符串 - 在下一次单击时，left属性将为20px20px，而且这不是有效的CSS。

您的朋友通过解析可能意味着“将位置值转换为整数，添加20，然后将left属性设置为该属性而不是附加”。这就是praguan的答案所做的，看起来 - 它会起作用，但如果你不使用jQuery，它可能不是你想要的。（不是每个人都是。）

我认为我们可以不进行解析，而是使用单独的变量来跟踪位置：

<img id="bird" src="http://placehold.it/150" />
<br />
<a id="move-link" href="#">move the image</a>

var bird = document.getElementById('bird');
var moveLink = document.getElementById('move-link');
var position = 0;

bird.style.position = 'relative';

moveLink.onclick = function() {
  position += 20;
  bird.style.left = position + 'px';
}

Here's a JSfiddle展示了如何做到这一点。

使用Javascript onclick移动图像？

4 个答案: