html5图片实现双指拉大

在html5中，特别是购物商城，或者公司产品图片展示。

由于客户端通常都是移动终端设备，屏幕比较小，于是有通过html5图片实现双指拉大的需求，代码如下。

欢迎评论，谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Finger Zoom Image</title>
    <style>
        #zoomable-image {
            width: 100%; /* 或者设置一个具体的宽度 */
            transition: transform 0.2s; /* 平滑的缩放效果 */
        }
    </style>
</head>
<body>
    <img id="zoomable-image" src="ceshi1.jpeg" alt="Zoomable Image">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var img = document.getElementById('zoomable-image');
            var mc = new Hammer(img);
            mc.get('pinch').set({ enable: true }); // 启用捏合手势识别
            mc.on('pinch', function(ev) { // 监听pinch事件进行缩放处理
                var scale = ev.scale; // 获取缩放比例，默认是1，即100%大小。大于1放大，小于1缩小。
                img.style.transform = 'scale(' + scale + ')'; // 应用缩放变换到图片上。
            });
        });
    </script>
</body>
</html>

 

posted on 2025-08-19 17:21  会走路的虾米  阅读(64)  评论(0)    收藏  举报

导航