前端html页面 鼠标悬停位置按住ctrl 滚轮放大

在前端HTML页面中，你可以使用CSS的`transform`属性来实现放大或缩小元素的效果，然后使用JavaScript来检测鼠标滚轮事件和Ctrl键是否被按下。

以下是一个基本的示例代码：

HTML:

<div class="zoomable">
  <img src="example.jpg" alt="Example Image">
</div>

CSS:

.zoomable {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zoomable img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.2s ease-out;
}

JavaScript:

const zoomable = document.querySelector('.zoomable');
let scale = 1;

zoomable.addEventListener('wheel', (event) => {
  if (event.ctrlKey) {
    event.preventDefault();
    scale -= event.deltaY * 0.01;
    scale = Math.min(Math.max(0.5, scale), 3);
    zoomable.querySelector('img').style.transform = `scale(${scale})`;
  }
});

这个示例代码中，我们首先创建了一个容器`div`和一个包含图片的`img`元素。然后使用CSS将容器设置为可滚动并限制`img`元素的最大宽度和高度。最后使用JavaScript监听`wheel`事件和Ctrl键的按下状态，根据滚轮滚动的方向和量来调整图片的缩放比例，并将其应用于`transform`属性中。