js实现缩放
使用 CSS transform 实现缩放
通过 CSS 的 transform: scale() 属性可以轻松实现元素的缩放效果。在 JavaScript 中动态修改这个属性即可实现交互式缩放。
const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大1.5倍
element.style.transform = 'scale(0.8)'; // 缩小到80%监听滚轮事件实现缩放
通过监听鼠标滚轮事件，可以实现基于滚动的缩放交互。需要注意阻止默认滚动行为以避免页面滚动。
const target = document.getElementById('zoomable');
target.addEventListener('wheel', (e) => {
e.preventDefault();
let scale = parseFloat(target.style.transform.replace('scale(', '')) || 1;
scale += e.deltaY * -0.01;
scale = Math.min(Math.max(0.5, scale), 3); // 限制缩放范围
target.style.transform = `scale(${scale})`;
});使用动画实现平滑缩放
结合 CSS transition 可以实现平滑的缩放动画效果。
const box = document.querySelector('.box');
box.style.transition = 'transform 0.3s ease';
box.style.transform = 'scale(1.2)';基于手势的多点触控缩放
对于触摸设备，可以通过监听 touch 事件计算两点距离变化来实现捏合缩放。
let initialDistance = 0;
const element = document.getElementById('pinch-zoom');
element.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches[0], e.touches[1]);
}
});
element.addEventListener('touchmove', (e) => {
if (e.touches.length === 2) {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const scale = currentDistance / initialDistance;
element.style.transform = `scale(${scale})`;
}
});
function getDistance(touch1, touch2) {
return Math.hypot(
touch2.clientX - touch1.clientX,
touch2.clientY - touch1.clientY
);
}使用 Canvas 实现内容缩放
对于 Canvas 绘制的内容，可以通过修改变换矩阵来实现缩放。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let scale = 1;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(scale, scale);
// 绘制内容
ctx.fillRect(50, 50, 100, 100);
ctx.restore();
}
// 缩放控制
document.getElementById('zoom-in').addEventListener('click', () => {
scale *= 1.1;
draw();
});响应式缩放实现
结合 resize 事件监听器，可以实现基于窗口大小变化的响应式缩放。
function adjustScale() {
const baseWidth = 1920;
const currentWidth = window.innerWidth;
const scaleRatio = currentWidth / baseWidth;
document.body.style.transform = `scale(${scaleRatio})`;
}
window.addEventListener('resize', adjustScale);
adjustScale(); // 初始化使用第三方库实现高级缩放
对于更复杂的缩放需求，可以考虑使用专业库如：
- Hammer.js：处理手势缩放
- Panzoom：专门处理平移缩放
- ZOOM.js：专注于图片缩放
// 使用 panzoom 示例
const elem = document.getElementById('zoom-container');
panzoom(elem, {
maxZoom: 5,
minZoom: 0.5
});
