touch.js图片缩放实例

touch.js 是一个用于处理移动设备上触摸事件的 JavaScript 库。它可以帮助开发者实现图片缩放等交互效果。以下是一个使用 touch.js 实现图片缩放的基本实例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片缩放示例</title>
    <style>
        #image-container {
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        #image-container img {
            width: 100%;
            transition: transform 0.2s;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img id="zoom-image" src="your-image-source.jpg" alt="Zoomable Image">
    </div>

    <!-- 引入 touch.js 库 -->
    <script src="path/to/touch.js"></script>
    <script src="path/to/your-script.js"></script>
</body>
</html>

JavaScript 代码（your-script.js）

document.addEventListener('DOMContentLoaded', function() {
    var imageContainer = document.getElementById('image-container');
    var zoomImage = document.getElementById('zoom-image');

    var touchStartDistance = null;
    var initialScale = 1;

    imageContainer.addEventListener('touchstart', function(event) {
        if (event.touches.length === 2) {
            touchStartDistance = Math.hypot(
                event.touches[0].pageX - event.touches[1].pageX,
                event.touches[0].pageY - event.touches[1].pageY
            );
            initialScale = parseFloat(zoomImage.style.transform.replace(/[^0-9.]/g, '')) || 1;
        }
    }, false);

    imageContainer.addEventListener('touchmove', function(event) {
        if (event.touches.length === 2) {
            event.preventDefault(); // 阻止默认的双指缩放行为

            var currentDistance = Math.hypot(
                event.touches[0].pageX - event.touches[1].pageX,
                event.touches[0].pageY - event.touches[1].pageY
            );

            var scale = initialScale * (currentDistance / touchStartDistance);
            scale = Math.max(1, Math.min(scale, 5)); // 限制缩放范围

            zoomImage.style.transform = 'scale(' + scale + ')';
        }
    }, false);

    imageContainer.addEventListener('touchend', function(event) {
        if (event.touches.length < 2) {
            touchStartDistance = null;
        }
    }, false);
});