Question

我已经问过这个问题，但它没有解决我的问题（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>

Answer 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>

Answer 2

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

还有一些小事：

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

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

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

您应该尝试使用addEventListener代替onclick。

祝你好运！

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

2 个答案: