当前位置：首页 > jquery

jquery 缩放

2026-02-03 11:58:17jquery

jQuery 缩放元素的方法

使用 jQuery 实现元素的缩放可以通过 CSS transform 属性或直接调整元素的 width 和 height 属性。以下是几种常见的实现方式：

通过 CSS transform 缩放

使用 transform: scale() 可以保持元素的原布局位置，仅视觉上缩放：

jquery 缩放

// 缩放至原始大小的 50%
$('#targetElement').css('transform', 'scale(0.5)');

// 水平缩放 80%，垂直缩放 120%
$('#targetElement').css('transform', 'scale(0.8, 1.2)');

通过调整宽高缩放

直接修改元素的尺寸属性，会影响布局流：

jquery 缩放

// 获取当前宽度并缩放到 70%
const originalWidth = $('#targetElement').width();
$('#targetElement').width(originalWidth * 0.7);

// 同步调整高度
const originalHeight = $('#targetElement').height();
$('#targetElement').height(originalHeight * 0.7);

动画缩放效果

结合 jQuery 的 animate() 方法实现平滑过渡：

// 使用 transform 的动画（需 jQuery UI 支持）
$('#targetElement').animate({
  transform: 'scale(1.2)'
}, 500);

// 传统宽高动画
$('#targetElement').animate({
  width: '+=30%',
  height: '+=30%'
}, 300);

注意事项

使用 transform: scale() 时，元素的实际占位空间不会改变，可能与其他元素产生重叠。
直接修改 width/height 会影响文档流布局，但更易精确控制尺寸。
动画缩放时，考虑添加 transition CSS 属性或使用 jQuery UI 增强动画效果。

响应式缩放示例

根据窗口大小动态调整缩放比例：

$(window).resize(function() {
  const scaleValue = $(window).width() < 768 ? 0.8 : 1;
  $('.responsive-element').css('transform', `scale(${scaleValue})`);
});