使用Javascript，我如何制作一个元素的动画'单击定位标记后的移动

我很无聊，这里有一个关于如何做你想做的事情的评论示例，看看它是否有帮助：

// Contains the list of moving objects, and functions to manipulate that list, and to 
// move the objects in the list
var MoveLogic = (function() {
  // The internal list
  var list = [];
  // For clarity
  var directions = {
    LEFT: 0,
    RIGHT: 1
  };
  // The limit (in pixels) that an element will move to the right on being clicked
  var limit = 100;
  // Add an item to the list of objects being moved
  var add = function(elem) {
    var i,
      direction = directions.RIGHT,
      offset = 0;
    // Check if the element has been moved already, if so we want to reverse it by default.
    if (parseInt(elem.style.left, 10) > 0) {
      offset = parseInt(elem.style.left, 10);
      direction = directions.LEFT;
    }
    // Check to see if the element is already moving:
    for (i = 0; i < list.length; i++) {
      if (list[i].elem === elem) {
        // It is, so remove it from the list and change the defaults
        if (list[i].direction === directions.RIGHT) {
          direction = directions.LEFT;
        } else {
          direction = directions.RIGHT;
        }
        offset = list[i].offset;
        list.splice(i, 1);
        break;
      }
    }
    // Add the element to the list, with some info on how it is moving.
    list.push({
      elem: elem,
      direction: direction,
      offset: offset,
      active: true
    });
  };
  // Creates a handler for adding eventlisteners
  var createHandler = function(elem) {
    return function(e) {
      // This stops the browser from trying to follow the link
      e.preventDefault();
      add(elem);
    };
  };
  // One movement 'tick'
  var tick = function() {
    var i;
    for (i = 0; i < list.length; i++) {
      if (list[i].direction === directions.RIGHT) {
        list[i].offset += 1;
        if (list[i].offset > limit) {
          list[i].active = false;
        }
      } else {
        list[i].offset -= 1;
        if (list[i].offset <= 0) {
          list[i].active = false;
          list[i].offset = 0;
        }
      }
      list[i].elem.style.left = list[i].offset + "px";
      if (!list[i].active) {
        list.splice(i, 1);
        i--;
      }
    }
  };
  // Start the timer to move the elements
  var start = function() {
    window.setInterval(tick, 33);
  };
  // Expose the public methods
  return {
    start: start,
    createHandler: createHandler
  };
}());
// Start the mover.
MoveLogic.start();

// Self executing function to avoid polluting global scope
(function() {
  // Get all the 'a' tags
  var linkList = document.getElementsByTagName("a");
  // Loop through them, adding the handlers for the movement.
  var i = 0;
  for (i = 0; i < linkList.length; i++) {
    linkList[i].addEventListener("click", MoveLogic.createHandler(linkList[i]));
  }
}());

a {
  display: block;
  position: relative;
}

<a href="#">This</a>
<a href="#">is a list</a>
<a href="#">of a few</a>
<a href="#">links</a>

你需要做一些事情来实现你想要的效果，还不清楚你错过了什么，所以我无论如何都会列出它们。

1. 你需要在你的锚标签上附加一个事件监听器，这样当人们点击它时，你就可以执行你的javascript。你可以使用原始的JS element.addEventListener(type, handler);函数，或者你选择的库。调用event.prventDefault（）也可能有所帮助；以停止链接后的浏览器
2. 你需要有一个定期更新运行，将做你的动画。如果需要继续制作动画，可以使用window.setTimeout(fnc, delay);并确保fnc再次调用setTimeout，或者使用window.setInterval(fnc, delay);并使计时器无限期运行
3. 您需要在上面使用的fnc函数中更新元素的位置。在原始JS中，它将是element.style.left = number + "px";，其中number随时间变化