前几天有个朋友问我这个问题:如何实现“把鼠标放到图片后,变成动态图”,他估计是没学过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,注:图片就是使用这两张“可爱的小猫”。