如何实现“把鼠标放到图片后变成动态图”？

几天前，一个朋友问我这个问题：如何实现“将鼠标放在图片上并将其变成动态图片”。他估计自己从未学习过JavaScript。实际上，这个问题很容易实现。这是一个简短的介绍：

将原始图片放置为静态图片，为图片设置鼠标悬停事件（onmouseover），并将图片路径设置为动态图片路径；然后设置鼠标离开事件（onmouseout）以恢复URL。当将鼠标放在图片上时，可以达到动态图片的效果；而当鼠标放在图片上时，则可以达到静态图片的效果。

源代码如下。如果要尝试运行它，请注意图像路径问题。此处的图像与HTML在同一文件夹中。具体来说，您可以在末尾看到测试地址。

  
    
	
    
    
    
    
    
    
  
  
  
    
下面这张图片原本是静态图，把鼠标到图片后，变成动态图
这是静态图片：
这是动态图片：
（注意：如果此处的图片无法上传GIF，则可以查找动态图片，也许您可​​能会问如果没有静态图片该怎么办？只需对图片进行截图！如果截图中的像素有所不同，您可以使用图片的“添加宽度和高度”属性进行控制。）
2019年9月25日更新：
添加测试地址：，注意：图片使用了这两只“可爱的小猫”。
					

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-366063-1.html