Как я должен перемещать объект по кнопке (в данном случае) 10 пикселей? В моем коде кнопки «вправо» и «вниз» не работают, перемещают изображение вверх и влево, но не на 10 пикселей к верхнему / левому краю. Я попробовал это:

0
PoloOlo 28 Дек 2019 в 13:37
Привет, PoloOlo, вы пытаетесь переместить объект на 10 пикселей от исходного положения элемента или на 10 пикселей от левой стороны экрана?
 – 
Ivan
28 Дек 2019 в 13:47
Привет, @Ivan, спасибо за ответ. Я пытаюсь переместить его из исходного положения (которое указано в стиле, положение объекта абсолютное), в случае нескольких щелчков мыши я хочу, чтобы он перемещался с того места, где он был перемещен раньше
 – 
PoloOlo
28 Дек 2019 в 13:55
@PoloOlo, ваш исходный вопрос был более описательным, а также включал в себя то, что вы пробовали. Но этот тип вопросов не поощряется в SO, поэтому я предлагаю вам повторно опубликовать свой исходный вопрос или включить сюда то, что вы пробовали.
 – 
Addis
28 Дек 2019 в 16:03

2 ответа

Прежде всего, ваша картинка не позиционирована, то есть по умолчанию она позиционирована static, поэтому вы не можете использовать свойства стиля left, right, top или bottom. Я установил для родителей положение relative, а положение ребенка (img) - absolute, чтобы расположение изображения было относительно родителя (тело в вашем случае).

Я думаю, что вы также хотите делать добавочное назначение при каждом нажатии кнопки, и в этом случае вы должны сначала получить текущую позицию изображения. Вы можете сделать это со свойствами offsetTop и offsetLeft.

body {
  position: relative;
}

img {
  position: absolute;
  left: 200px;
  top: 100px;
}
<body>  

    <img onclick="A()" id='inspo' src="a8.jpg">

    <button id="left" onclick="moveleft()">left</button>
    <button class="right" onclick="moveright()">right</button>
    <button class="down" onclick="movedown()">down</button>
    <button class="up" onclick="moveup()">up</button>

<script type="text/javascript">

function moveleft() {
  const img = document.getElementById('inspo');
  img.style.left = `${img.offsetLeft - 10}px`;
}

function moveright() {
  const img = document.getElementById('inspo');
  img.style.left = `${img.offsetLeft + 10}px`;
}

function moveup() {
  const img = document.getElementById('inspo');
  img.style.top = `${img.offsetTop - 10}px`;
}

function movedown() {
  const img = document.getElementById('inspo');
  img.style.top = `${img.offsetTop + 10}px`;
}


function A() {
  document.getElementById('inspo').style.display = "none";
}
</script>
</body>

РЕДАКТИРОВАТЬ: Если вы хотите сохранить исходный стиль и использовать свойства left и top, чтобы не только устанавливать значения, но и получать значения, вы можете использовать приведенный ниже код, обратите внимание, что left и {{X3 }} свойства возвращают строку, поэтому вам придется преобразовать результат в число, прежде чем выполнять арифметическую операцию над ним.

<body style="position: relative;">  

    <img style=" position: absolute; left: 100px; top: 100px;" onclick="A()" id='inspo' src="a8.jpg">

    <button id="left" onclick="moveleft()">left</button>
    <button class="right" onclick="moveright()">right</button>
    <button class="down" onclick="movedown()">down</button>
    <button class="up" onclick="moveup()">up</button>

<script type="text/javascript">

function moveleft() {
  const img = document.getElementById('inspo');
  img.style.left = Number(img.style.left.slice(0, -2)) - 10 + 'px';
}

function moveright() {
  const img = document.getElementById('inspo');
  img.style.left = Number(img.style.left.slice(0, -2)) + 10 + 'px';
}

function moveup() {
  const img = document.getElementById('inspo');
  img.style.top = Number(img.style.top.slice(0, -2)) - 10 + 'px';
}

function movedown() {
  const img = document.getElementById('inspo');
  img.style.top = Number(img.style.top.slice(0, -2)) + 10 + 'px';
}


function A() {
  document.getElementById('inspo').style.display = "none";
}
</script>
</body>
0
Addis 28 Дек 2019 в 14:59

Вот фрагмент кода:

<!DOCTYPE html>
<html>
<title>Web Page Design</title>

<head>
  <style type="text/css">
    div {
      width: 100px;
      height: 75px;
      background-color: red;
      border: 1px solid black;
    }
    
    #div2 {
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      /* IE 9 */
      -moz-transform: rotate(30deg);
      /* Firefox */
      -webkit-transform: rotate(30deg);
      /* Safari and Chrome */
      -o-transform: rotate(30deg);
      /* Opera */
      background-color: yellow;
    }
  </style>
</head>

<body>

  <p onclick="A()" id='inspo' src="a8.jpg">OK</p>

  <button id="left" onclick="moveleft()">left</button>
  <button class="right" onclick="moveright()">right</button>
  <button class="down" onclick="movedown()">down</button>
  <button class="up" onclick="moveup()">up</button>

  <script type="text/javascript">
    var topNum = 0,
      leftNum = 0;

    function moveleft() {
      leftNum -= 10;
      document.getElementById('inspo').style.marginLeft = leftNum + 'px';
    }

    function moveright() {
      leftNum += 10;
      document.getElementById('inspo').style.marginLeft = leftNum + 'px';
    }

    function moveup() {
      topNum -= 10;
      document.getElementById('inspo').style.marginTop = topNum + 'px';
    }

    function movedown() {
      topNum += 10;
      document.getElementById('inspo').style.marginTop = topNum + 'px';
    }


    function A() {
      document.getElementById('inspo').style.display = "none";
    }
  </script>
</body>

</html>
0
Goran Stoyanov 28 Дек 2019 в 20:51