JS实现鼠标悬浮小图预览大图功能

实现图片悬浮预览大图功能

在展示图片列表后，通常需要增加一个查看大图的功能。为此，可以使用JavaScript编写一个处理函数，并将其绑定到图片元素的onmouseover事件上。这样，当鼠标悬停在缩略图上时，对应的大图会自动显示出来。

以下是用于显示和隐藏大图的JavaScript代码实现：

 
<script type="text/javascript">
// 显示图片逻辑
function over(imgid, obj, imgbig)
{ 
// 定义大图显示的最大尺寸，遵循4:3比例，最大宽度400，最大高度300
maxwidth=400;
maxheight=300;
// 设置大图容器可见
obj.style.display="";
imgbig.src=imgid.src;
// 1. 如果宽和高都超过最大值，比较超出部分的大小。超出较多的那个维度设为最大值，另一个维度按比例缩放（策略见2、3）
// 2. 如果宽超过最大值但高未超过，将宽设为最大值
// 3. 如果宽未超过但高超过最大值，将高设为最大值
if(img.width>maxwidth&&img.height>maxheight)
{ 
pare=(img.width-maxwidth)-(img.height-maxheight);
if(pare>=0)
img.width=maxwidth;
else
img.height=maxheight;
} 
else if(img.width>maxwidth&&img.height<=maxheight)
{ 
img.width=maxwidth;
} 
else if(img.width<=maxwidth&&img.height>maxheight)
{ 
img.height=maxheight;
} 
} 
// 隐藏图片逻辑
function out()
{ 
document.getElementById('divImage').style.display="none";
} 
</script>

HTML结构与事件绑定示例

前端HTML结构中，包含用于触发事件的小图标签和用于展示大图的大图容器：

 
<img id="img" src="你的图片地址" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />
<%-- 显示大图标的区域 --%>
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
<img id="imgbig" src="~/Images/noImage.gif" alt="预览" />
</div>