本文介绍了一种简单的方法，通过HTML和JavaScript实现鼠标悬停在图片上时，静态图变为动态图的效果。只需设置鼠标悬浮事件（onmouseover）和鼠标离开事件（onmouseout），即可轻松实现交互体验。
前几天有个朋友问我这个问题：如何实现“把鼠标放到图片后，变成动态图”，他估计是没学过JavaScript，其实这个问题实现起来还是挺简单的。下面简单说下：
原图片放静态图，为图片设置鼠标悬浮事件（onmouseover），把图片路径设置为动态图路径；再设置一个鼠标离开事件（onmouseout），把URL还原就好了。这样就可以达到鼠标放到图片上时，是动态图，离开后是静态图的效果。
源代码如下，如想尝试运行，请注意图片路径问题，我这里图片是和HTML放在同一文件夹里的。具体可见最后面的测试地址。
<!DOCTYPE html>
<html>
<head>
<title>静态图_悬浮变动态图.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<p>下面这张图片原本是静态图，把鼠标到图片后，变成动态图</p>
<img alt="猫_静态图" src="猫_静态图.jpg"
onmouseover="src='猫_动态图.gif'"
onmouseout="src='猫_静态图.jpg'"/>
</body>
</html>
这个是静态图：
这个是动态图：
（注：如果这里的图片不能上传GIF，你可以上网找动态图，也许你可能会问没有静态图怎么办？截图动图就可以了！如果截图的像素不一样，你可以为图片添加width和height属性进行控制。）
2019年9月25日更新：
添加测试地址：https://codepen.io/yansheng836/pen/mdbopqM，注：图片就是使用这两张“可爱的小猫”。
扫一扫
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
