Перемещение изображения с помощью Javascript onclick?

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 пикселей. КАЖДЫЙ раз, когда нажимается ссылка. Один из друзей сказал мне «разобрать его, прежде чем добавлять», но я не совсем уверен, что они означают. Что я должен разбирать? Любые предложения/помощь очень ценятся. Благодаря!

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

Вы можете добавить прослушиватель событий к своей ссылке, а затем использовать правило CSS для перемещения элемента. translateX переместит элемент с того места, где он находится на странице.

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 
 
}

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

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

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, показывающий, как это может быть сделано.