Question

当我按下按钮时，我试图将div-200px从原来的位置移开。现在我希望能够多次这样做。

function leftAnimate(){
        original = document.getElementById("sliderzelf").setAttribute("style", "margin-left: -200px;");
    }

这段代码（我假设，如果我错了，请纠正我。）确实将属性ONCE设置为-200px。有什么方法可以让我从每个新的起始位置做到-200px吗？

Answer 1

由于你使用了jquery-animate标签，我认为你有jQuery。在这种情况下，以下应该有效：

function leftAnimate() {
    $("#sliderzelf").css("margin-left", "-=200");
}

Answer 2

如果您愿意，可以调用此函数，在元素上添加css过渡，如果您希望它滑动或等等。快乐的编码！

function leftAnimate(){
  var el = document.getElementById("section");
  var curMargin = window.getComputedStyle(el)['margin-left'].replace('px', '');
  var newPos = Number(curMargin - 200);
  original = el.setAttribute("style", "margin-left:" + newPos + "px;");
}

Answer 3

如果元素是绝对元素，请尝试使用Left而不是margin-left，或您可以尝试使用jQuery：

function leftAnimate(){
        var actualPosition = $("#sliderzelf").css("left");
        original = document.getElementById("sliderzelf").setAttribute("style", "margin-left: " + (actualPosition - 200).toString() + "px;");
    }

Answer 4

使用纯javascript：

＆＃13;

function leftAnimate(){
  //get the button
  var btn = document.getElementById("sliderzelf");

  //get the current margin
  var currentMargin = btn.style.marginLeft.replace("px", "");

  //calculate the new margin
  var newMargin = currentMargin - 200;

  //check if the new margin is valid (optional)
  if (newMargin >= 0)
    btn.setAttribute("style", "margin-left: " + newMargin + "px;") //set the new margin
}

＆＃13;

<button id="sliderzelf" style="margin-left: 600px" onclick="leftAnimate()">
    Click me!
</button>

＆＃13;

使用jquery只需将函数更改为：

 $("#sliderzelf").css('margin-left', '-= 200');

div多次做-200px？

4 个答案: