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程序设计的内容能对读者有所帮助。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
