当前位置：首页 > JavaScript

js实现弹框放大缩小

2026-01-31 07:49:22JavaScript

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

通过JavaScript动态修改弹框的CSS属性（如width、height、transform）实现放大缩小效果。核心逻辑包括监听用户操作（如按钮点击或拖拽边缘）、计算目标尺寸、添加过渡动画。

基础实现代码示例

<div id="dialog" style="width: 200px; height: 150px; border: 1px solid #000;">
  <div class="content">弹框内容</div>
  <button onclick="zoomIn()">放大</button>
  <button onclick="zoomOut()">缩小</button>
</div>

<script>
  const dialog = document.getElementById('dialog');

  function zoomIn() {
    const currentWidth = parseInt(dialog.style.width);
    const currentHeight = parseInt(dialog.style.height);
    dialog.style.width = `${currentWidth * 1.2}px`;
    dialog.style.height = `${currentHeight * 1.2}px`;
  }

  function zoomOut() {
    const currentWidth = parseInt(dialog.style.width);
    const currentHeight = parseInt(dialog.style.height);
    dialog.style.width = `${currentWidth * 0.8}px`;
    dialog.style.height = `${currentHeight * 0.8}px`;
  }
</script>

添加平滑过渡效果

通过CSS的transition属性实现动画效果：

#dialog {
  transition: all 0.3s ease;
}

拖拽边缘调整尺寸

实现边缘拖拽需要监听鼠标事件：

let isResizing = false;
let lastX, lastY;

dialog.addEventListener('mousedown', (e) => {
  const rect = dialog.getBoundingClientRect();
  const edgeThreshold = 10;

  // 检查是否点击边缘
  if (rect.right - e.clientX < edgeThreshold && 
      rect.bottom - e.clientY < edgeThreshold) {
    isResizing = true;
    lastX = e.clientX;
    lastY = e.clientY;
    e.preventDefault();
  }
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;

  const rect = dialog.getBoundingClientRect();
  const dx = e.clientX - lastX;
  const dy = e.clientY - lastY;

  dialog.style.width = `${rect.width + dx}px`;
  dialog.style.height = `${rect.height + dy}px`;

  lastX = e.clientX;
  lastY = e.clientY;
});

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

使用CSS transform缩放

替代直接修改宽高，可通过transform实现视觉缩放：

let scale = 1;

function zoomIn() {
  scale *= 1.2;
  dialog.style.transform = `scale(${scale})`;
}

function zoomOut() {
  scale *= 0.8;
  dialog.style.transform = `scale(${scale})`;
}