js实现缩放功能
使用 CSS transform 实现缩放
通过 CSS 的 transform: scale() 属性可以实现元素的缩放效果。结合 JavaScript 动态修改缩放比例。
const element = document.getElementById('target');
let scale = 1;
function zoomIn() {
scale += 0.1;
element.style.transform = `scale(${scale})`;
}
function zoomOut() {
if (scale > 0.1) {
scale -= 0.1;
element.style.transform = `scale(${scale})`;
}
}监听鼠标滚轮事件实现缩放
通过监听鼠标滚轮事件，根据滚轮方向调整缩放比例。
const element = document.getElementById('target');
let scale = 1;
element.addEventListener('wheel', (e) => {
e.preventDefault();
scale += e.deltaY * -0.01;
scale = Math.min(Math.max(0.1, scale), 4);
element.style.transform = `scale(${scale})`;
});使用手势缩放（触摸设备）
对于触摸设备，可以通过监听 touchstart、touchmove 等事件实现双指缩放。
const element = document.getElementById('target');
let initialDistance = 0;
let currentScale = 1;
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 scaleFactor = currentDistance / initialDistance;
currentScale = Math.min(Math.max(0.1, scaleFactor), 4);
element.style.transform = `scale(${currentScale})`;
}
});
function getDistance(touch1, touch2) {
return Math.hypot(
touch2.clientX - touch1.clientX,
touch2.clientY - touch1.clientY
);
}使用第三方库实现高级缩放
对于更复杂的缩放需求，可以考虑使用第三方库如：
- Hammer.js（手势识别）
- Interact.js（拖放和缩放）
- Zoom.js（专注缩放功能）
// 使用 Zoom.js 示例
const zoomInstance = new Zoom({
element: document.getElementById('target'),
maxScale: 4,
minScale: 0.5,
step: 0.1
});保持缩放中心点
默认情况下缩放以元素中心为基准，可以通过 transform-origin 调整基准点。
// 以左上角为基准点缩放
element.style.transformOrigin = '0 0';性能优化建议
对于频繁的缩放操作，建议使用 will-change 属性优化性能。
element.style.willChange = 'transform';缩放完成后可以移除该属性：
element.style.willChange = 'auto';
