Javascript/CSS：如何从光标位置开始动画答案

【问题标题】：Javascript/CSS: How to start animation from cursor positionJavascript/CSS：如何从光标位置开始动画
【发布时间】：2018-03-26 02:18:34
【问题描述】：

我已经问过这个问题，但它没有解决我的问题 (JavaScript / CSS - How can I start an animation, creating new Divs from cursor position?)。

我找到了一个解决方案，但它似乎无法在 Mozilla 和 Opera 上正常工作。此外，当我多次单击时，div 开始闪烁，这不是我想要的。我需要同时拥有多个 div，因此要同时拥有多个动画。下面是一个现有游戏的示例：http://www.cram.com/flashcards/games/stellar-speller/gre-hit-parade-group-1-320949 请不要使用 jQuery，只需使用普通的 Javascript。谢谢！

<!DOCTYPE html>
    <html>
   <head>
   <style>
     #table{
   height:300px;
   width:900px;
  background:red;

     }
 #ball {
     width: 25px;
     height: 25px;
     position: absolute;
       background-color: white;
     border-radius:50px;
    display:none;
    z-index:11;


   }
   </style>
   <script>  function animation(){ var elem = 
    document.getElementById("ball"); 
   document.getElementById("ball").style.display ='block';
    document.getElementById("ball").disabled = true;
  var x = event.clientX;
   var y = event.clientY;
  var id = setInterval(frame, 2);
   function frame() {
    if (x == 900) {
    clearInterval(id);

   } 
  else {
  x++;   
  elem.style.top = y + 'px';
  elem.style.left = x + 'px'; 
   }
   }
     }
   </script>
  </head>
  <body>
   <div id="table" onclick="animation()">
    <div id="ball"></div>
   </body>
   </html>

【问题讨论】：

您应该尝试提出一个独立的问题，而不是要求人们阅读大量背景资料，然后才能尝试帮助您解决具体问题。

标签： javascript css

【解决方案1】：

您的代码中很少有问题。首先，您必须在每次单击时克隆或创建一个新球（请注意cloning 元素不会复制附加事件）。不要混合使用 HTML 和 Javascript 并使用 addEventListener，它可以让您将事件作为参数

document.getElementById('table').addEventListener("click",animation);

function animation(event){
    var ball = document.getElementById("ball");
    //clone element or create another one (you should set a class in you css)
    var elem = ball.cloneNode(true);
  document.getElementById("table").appendChild(elem);

    elem.style.display ='block';
//    document.getElementById("ball").disabled = true;
    var x = event.clientX;
    var y = event.clientY;
 
    var id = setInterval(frame, 2);
    
    function frame() {
        if (x == 900) {
            clearInterval(id);
        } 
        else
        {
            x++;
            elem.style.top = y + 'px';
            elem.style.left = x + 'px'; 
        }
    }
}

#table{
  height:300px;
  width:900px;
  background:red;
}

#ball {
  width: 25px;
  height: 25px;
  position: absolute;
  background-color: white;
  border-radius:50px;
  display:none;
  z-index:11;
}

<div id="table">
    <div id="ball"></div>
</div>

【讨论】：

谢谢！我尝试了你的代码，但是 evenlistener 有问题，上面写着“Uncaught TypeError: Cannot read property 'addEventListener' of null”，但我不明白为什么，它在库存溢出时工作
你必须将脚本放在页面末尾，在 DOM 加载完成后

【解决方案2】：

您为每个动画重复使用相同的 #ball 元素，它不能同时在两个地方。要每次创建一个新元素，请使用document.createElement。然后你必须用appendChild 将该元素放在某处，并在动画完成后用removeChild 将其删除。

还有一些小事：

如果文档中有多个ball，请使用类而不是 ID - ID 只能使用一次。

您的<div>s 没有在 HTML 中以 </div> 关闭，这可能是 Firefox 的问题。人们还在使用 Opera 吗？

您应该在这里使用requestAnimationFrame 而不是setInterval。

您应该尝试使用addEventListener 而不是onclick。

祝你好运！

【讨论】：