从头开始[复制的gif动画]

Question

此问题已经在这里有了答案：

• Stop a gif animation onload, on mouseover start the activation10个答案

我想使用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，则此方法将不起作用。