从头开始动画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);
}

问题解决了：
javscript代码：

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属性。如果您像现在一样使用CSS background，这种方法将无效。