当前位置：首页 > JavaScript

js实现弹框放大缩小

2026-04-04 23:49:12JavaScript

js实现弹框放大缩小

实现弹框放大缩小的基本思路

通过JavaScript动态调整弹框元素的width和height属性，结合CSS过渡效果实现平滑缩放。核心是通过事件监听（如按钮点击）触发尺寸变化。

js实现弹框放大缩小

HTML结构示例

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>弹框内容</p>
    <button id="zoomIn">放大</button>
    <button id="zoomOut">缩小</button>
  </div>
</div>

CSS样式

.modal {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid #888;
  transition: all 0.3s ease;
}

JavaScript实现

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

// 当前缩放比例
let currentScale = 1;

zoomInBtn.addEventListener('click', () => {
  currentScale += 0.1;
  modal.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
});

zoomOutBtn.addEventListener('click', () => {
  if (currentScale > 0.2) {
    currentScale -= 0.1;
    modal.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
  }
});

进阶实现：拖动缩放

通过监听鼠标事件实现角落拖动缩放：

const resizeHandle = document.createElement('div');
resizeHandle.style.width = '10px';
resizeHandle.style.height = '10px';
resizeHandle.style.background = 'red';
resizeHandle.style.position = 'absolute';
resizeHandle.style.right = '0';
resizeHandle.style.bottom = '0';
resizeHandle.style.cursor = 'se-resize';
modal.appendChild(resizeHandle);

let isResizing = false;
resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  const newWidth = e.clientX - modal.getBoundingClientRect().left;
  const newHeight = e.clientY - modal.getBoundingClientRect().top;
  modal.style.width = `${newWidth}px`;
  modal.style.height = `${newHeight}px`;
});

document.addEventListener('mouseup', () => {
  isResizing = false;
});