JavaScript实现鼠标悬停图片放大与还原效果

作者:半夏时间:2026-10-29 07:55:12浏览:567

本文介绍利用JavaScript的onmouseover和onmouseout事件,实现鼠标悬停图片放大、离开后还原的效果。通过修改图片元素的height和width属性,动态调整显示尺寸,适用于简单的图片交互场景。

图片悬停交互实现

本文通过具体实例,讲解如何利用JavaScript中的鼠标事件动态调整图片显示状态。该方案可供开发者参考与借鉴。

当鼠标指针移入图片区域时,图片会自动放大显示;当鼠标指针离开图片区域时,图片尺寸恢复至原始大小。


<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)"
border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves
the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse
pointer is moved out of the image.</p>
</body>
</html>

希望上述关于JavaScript程序设计的内容能对读者有所帮助。

作者最新文章