用js做图片放大

在JavaScript中实现图片放大功能，通常可以通过以下几种方式：

一、基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM），获取并修改图片元素。
事件监听：为图片或相关按钮添加事件监听器，响应用户的放大操作。
CSS样式：利用CSS的transform属性来实现图片的缩放效果。

二、实现方式及示例代码

方法一：使用CSS和JavaScript结合

HTML结构：

<img id="myImage" src="path/to/image.jpg" alt="示例图片" style="transition: transform 0.3s;">
<button id="zoomIn">放大</button>
<button id="zoomOut">缩小</button>

JavaScript代码：

const img = document.getElementById('myImage');
const zoomInBtn = document.getElementById('zoomIn');
const zoomOutBtn = document.getElementById('zoomOut');

let scale = 1;

zoomInBtn.addEventListener('click', () => {
    scale += 0.1;
    img.style.transform = `scale(${scale})`;
});

zoomOutBtn.addEventListener('click', () => {
    scale -= 0.1;
    if (scale < 0.1) scale = 0.1; // 防止缩放过小
    img.style.transform = `scale(${scale})`;
});

方法二：使用鼠标滚轮事件

HTML结构：

<img id="myImage" src="path/to/image.jpg" alt="示例图片">

JavaScript代码：

const img = document.getElementById('myImage');

img.addEventListener('wheel', (event) => {
    event.preventDefault(); // 阻止默认的滚动行为
    let scale = parseFloat(img.style.transform.replace(/[^0-9.]/g, '')) || 1;
    if (event.deltaY < 0) {
        scale += 0.1;
    } else {
        scale -= 0.1;
        if (scale < 0.1) scale = 0.1;
    }
    img.style.transform = `scale(${scale})`;
});