从头开始动画 gif

Question

我想使用 gif 图像制作鼠标效果，但问题是图像不是从头开始的。 html 代码：
<div style="width: 100px;height: 100px;background: red;" onclick="myFunction(this,event)"></div>
JavaScript 代码：

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("DIV");
effect.style.background="url('http://s12.postimg.org/piulwsk61/image.gif')";
effect.style.backgroundSize="100% 100%";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

问题已解决：
javascript代码：

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("IMG");
effect.style.src="http://s12.postimg.org/piulwsk61/image.gif";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

Answer 1

您无法控制 GIF 动画的播放。如果您总是想每次都从头开始，则需要将其从 DOM 中删除并重新插入，或者至少重新指定属性src。background如果您像现在一样使用 CSS，则此方法将不起作用。