Question

我正在尝试开发一种我设计的交互，其中html元素在缩放期间被缩放（缩放高度），以便元素的高度变为手势中涉及的两个手指之间的距离。就目前而言，我正在尝试聆听并发出警报，然后听取压缩并用jQuery发出单独的警报。你知道怎么做吗？也许没有插件？

我试图用两个插件做到这一点。更多关于第一次尝试，稍后。

第二次尝试出了什么问题，它表示捏合是一个捏合，甚至点击或点击都是一个捏合。

我的第二次尝试是在这个JS小提琴：http://jsfiddle.net/hnabM/1/

以下是第二次尝试中使用的代码：

//pinchZoom is the distance between the two fingers involved in the pinch
var pinchIn = null;
var dist = null;
$('.pinch').swipe({
    pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchStatus:function(event, phase, direction, distance, duration, fingerCount, pinchZoom){
        if(dist != null){
            if(dist > pinchZoom){
                pinchIn = true;
            }
            else{
                pinchIn = false;
            }
            dist = pinchZoom;
            if(pinchIn === true){
                console.log("pinching in");
            }
            else{
                console.log("pinching out");
            }
        }
        else{
            dist = pinchZoom;
        }
    },
    fingers:2,
    pinchThreshold:0
});

这是我第一次尝试的内容。我得到了它的工作，但当我把它与我的网站结合起来时，它突然无法工作。

我第一次尝试这个时，我使用了jQuery版本的hammer.js（http://eightmedia.github.io/hammer.js/） - 一个有点着名的用于监听多点触控手势的库。我成功完成了它，除了我需要它工作的网站。这里正在研究类.polaroid（图像），尝试捏他们，他们y缩小，捏他们发出警报：http://goo.gl/oOQDH0。但是，当我在网站中应用相同的精确js，我需要它的网站，它突然不起作用。所有的依赖都在那里。没有错误。由于某些原因，滚动也有所抑制（在触摸设备上很难做到）。它与.dataCard类（标题下的白色矩形）应用的精确代码完全相同，但无法正常工作：http://goo.gl/dagKxT

我非常感谢任何和所有帮助，以促进这种互动的发展和工作。在此先感谢！

Answer 1

不要忽视或阻止你这样做，但有什么特别的理由让你自己写这个吗？

无论如何看看hammer.js https://github.com/EightMedia/hammer.js

支持/模仿许多常见的触摸手势。包括捏缩放。它就在他们的示例页面上：

https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html

你可能已经完成了你的研究，并且看到了很多这样的库，但是Hammer的代码库确实布局合理，很容易理解。

如果你打算从头开始，你可能会在开始时检测到一个手势并用一个公共标志将其锁定（所以其他手势不会启动）然后重置旗帜手势完成。

捏捏js;在挤出时运行不同的js

1 个答案: