js控制Gif动态图片的播放，鼠标悬浮状态开启GIf播放

我的博客右下角有一个小Guli的形象，他一直在看左上方的文章。这个是当初设计这个元素的原因，也是在边缘视觉给予用户的焦点暗示。当用户出现分心的时候，因为人类对眼球的视觉捕捉一般都是最快（即便是guli这个形象眼睛与人类相比很奇怪），所以人们在分心的时候看到Guli后很容易拉回视觉焦点到文章上。

右下角的Guli形象

情景

但是感觉有点缺少灵魂，首先就是对于鼠标的交互太少了，最开始的时候只有一个css写的鼠标悬浮状态变小，感觉没有交互。后来发现可以通过js重新设置图片src地址来重置播放。

1	document.getElementById('guli_gif').src = document.getElementById('guli_gif').src

那么就容易多了。

代码

首先一个只播放一遍的Gif+触发事件重新播放的js。

我这里设置成了鼠标悬浮状态会触发

var gulitop=document.getElementById('guli_gif');
 gulitop.onmouseover=function(){
	document.getElementById('guli_gif').src = document.getElementById('guli_gif').src
 }

如果你需要click状态时，也可以监听click

document.getElementById('guli_gif').addEventListener('click', function() {
                document.getElementById('guli_gif').src = document.getElementById('guli_gif').src
            });

完整代码：

<img id="guli_gif" src="gif的url地址" alt="guli_body" class="guli_body" onclick="fly_to_top()">
<script type="text/javascript">
        window.onload = function() {
             var gulitop=document.getElementById('guli_gif');
            gulitop.onmouseover=function(){
              document.getElementById('guli_gif').src = document.getElementById('guli_gif').src
            }
        }
 </script>