在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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。