如何在JavaScript中移动内容？

Question

我做了一个div和一个按钮。 在按钮的单击上设置了设置div边距（即移动div）的功能。 但是，如何使它在每次点击时都能移动。 每当我按下该按钮时，它都会移动（不刷新页面），当我再次按下该按钮时，它不起作用？ 如何使它在每次单击按钮时移动！ 这是我的代码：-

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
    <style>
        body
        {
            font-family:ebrima;
        }
    </style>
</head>


<body onload="" id="demo">

    <div name="player" style="float:right; height:32px; width:32px; background:green;" id="myDiv"></div>
    <form name="myForm" method="post">  
        <button value="MOVE" type="button" name="moveButton" onClick="move()">MOVE</button>
    </form>


    <script>
        function move()
        {
            document.getElementById("myDiv").style.margin="0px 10px 0px 0px";
        }
    </script>
</body>
</html>

Answer 1

我建议使用jQuery，它使很多JavaScript变得非常简单。

这是适合您的示例jQuery动画：

<script>
    function move() {
        $("#myDiv").animate({left:'+=250px'});
    }
</script>

每次您触发该功能时，按钮都会移动250px。

请注意，您需要将jQuery添加到您的项目中（这很简单）。 jQuery网站上有一些井井有条的教程，应该可以帮助您找到解决JavaScript和jQuery的方法-编码愉快！

Answer 2

每次使用变量设置新的边距。 使用完后，更改变量的值，以便下次将其移动到其他位置。

var x = 10;
function move() {
  document.getElementById("myDiv").style.margin="0px "+x+"px 0px 0px";
  x = x+10;
}

首先，不要使用内联js（例如onclick）。 阅读其中一些结果： * 内联js为什么不好？ *

相反，请使用javascript附加事件监听器：

var myBtn = document.getElementById('my-btn');
myBtn.addEventListener('click', move);

您的代码将更具可读性/效率，并且更容易调试，如下所示：

//cache element reference in advance
var document.getElementById("myDiv")

function move() {
  //just target the property you want to change.
  myDiv.style.marginLeft = x+'px';
  x = x+10;
}

这是我喜欢的一个小演示（点击） 。

var myDiv = document.getElementById('my-div');
var myBtn = document.getElementById('my-btn');

myBtn.addEventListener('click', move);

function move(e) {
  var v = r()+'px '+r()+'px '+r()+'px '+r()+'px';
  myDiv.style.margin = v;
}

function r() {
  return getRandomInt(0, 20);
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

这是使用mousemove而不是click的一种更有趣的方式。 演示在这里。

Answer 3

像这样：

function move() {
  var elt = document.getElementById("myDiv"),
      currentMargin = parseInt(elt.style.marginRight, 10);
  elt.style.marginRight = currentMargin + 10 + 'px';
}

如何在JavaScript中移动内容？

问题描述

3 个解决方案

解决方案1
2 2014-01-25 05:01:55

解决方案2
2 2014-01-25 05:02:27

解决方案3
0 2014-01-25 05:03:52

如何在JavaScript中移动内容？

问题描述

3 个解决方案

解决方案1 2 2014-01-25 05:01:55

解决方案2 2 2014-01-25 05:02:27

解决方案3 0 2014-01-25 05:03:52

解决方案1
2 2014-01-25 05:01:55

解决方案2
2 2014-01-25 05:02:27

解决方案3
0 2014-01-25 05:03:52