从头开始动画 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 属性。如果您现在使用 CSS background，这种方法将不起作用。