Question

我从未使用JavaScript编写与HTML元素交互的函数，所以我希望能得到一些帮助。我有一个将被点击的图像。我想将它从当前位置向左或向右移动，具体取决于它上次移动的方式。

例如，第一次点击它会向左移动，第二次向右移动，依此类推。这是元素的html和css代码：

转换仅用于居中。

这是我到目前为止所写的javascript;此时单击div时没有任何反应：

var logo = document.getElementById('logo');
var dir = -1;
var diff = 50;

function toMove(){
    for(int i=0; i<diff; i++){
        logo.style.left += ""+ dir +"px";
        window.setTimeout(100);
    }
    dir  = dir*-1;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="logo">
<a onclick="toMove()">
    <img src = "mypic.jpg"/>
</a>
</div>

我评论过的部分是我尝试过的第一个不起作用的选项。谁能告诉我我的问题是什么？谢谢！

更新：编辑脚本仅使用对dir变量进行操作的函数toMove（）。还修改了HTML以使用img周围的包装器直接调用函数，而不是在div上使用actionlistener。另外，我认为最初我没有说清楚，我的想法是在屏幕上创建一个平滑的过渡，而不是简单地立即重置位置。代码仍然不起作用，有什么建议吗？

Answer 1

您可以使用getBoundingClientRect（）方法获取左侧位置并尝试这样的事情：

＆＃13;

var logo = document.getElementById("logo");
var num = 1;
var move = 40;
var offsets = document.getElementById('logo').getBoundingClientRect();
logo.onclick = function() {

  if (num < 0)
    moveLeft(move);

  else moveRight(move)
}


function moveLeft(n) {
  logo.style.left = offsets.left - n + 'px';
  num = 1;

}

function moveRight(n) {
  logo.style.left = offsets.left + n + 'px';
  num = -1;
}

＆＃13;

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: #000;
}

＆＃13;

<div id="logo"> </div>

＆＃13;

使用javascript onclick

1 个答案: