将鼠标放在图片上后，将图片放大展示在浮动框架之中的web前端代买

在Web前端开发中，当用户将鼠标悬停在一个图片上时，通常会实现图片的放大效果，这通常通过JavaScript和CSS结合实现。这种交互常见于响应式设计中，叫做图片懒加载（lightbox或者zoom-in效果）。以下是基本步骤：

1. **HTML结构**：首先，在HTML中创建一个基础的图片元素，并包含一个锚点链接到显示大图的浮动框（如`<a>`标签内嵌`<img>`）。

<a href="large-image.jpg" class="lightbox">
   <img src="thumbnail.jpg" alt="描述" onmouseover="showLightBox(this)">
</a>
<div id="lightbox" style="display:none;">
   <img src="" class="zoomed-image">
</div>

2. **CSS样式**：设置初始隐藏和预设的放大样式。

#lightbox {
   position: fixed;
   top: 0; left: 0; width: 100%; height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
   z-index: 9999;
}

.lightbox img.zoomed-image {
   max-width: none !important;
   cursor: pointer;
}

3. **JavaScript处理**：当鼠标移入图片时，显示浮动框并初始化缩放功能。移开鼠标则关闭它。

function showLightBox(img) {
   var lightBox = document.getElementById('lightbox');
   var zoomedImage = lightBox.querySelector('.zoomed-image');

   // 设置大图URL
   zoomedImage.src = img.getAttribute('href');

   // 显示光标、调整大小并显示浮动框
   lightBox.style.display = 'block';
   img.classList.add('active'); // 添加激活状态

   // 当鼠标离开图片，隐藏浮动框
   img.addEventListener('mouseout', function() {
      lightBox.style.display = 'none';
      img.classList.remove('active');
   });
}