在pink-in上运行js;在pink-out上运行不同的js

run js on pinch in; run different js on pinch out

本文关键字：运行 js pink-out pink-in      更新时间：2024-07-03

我正在尝试开发一种我设计的交互，其中html元素在捏手时按y缩放（按高度缩放），这样元素的高度就变成了手势中两个手指之间的距离。目前，我正在尝试用jQuery监听一个夹点并发出警报，然后监听一个切点并发出单独的警报。你知道怎么做吗？也许没有插件

我尝试过用两个插件来实现这一点。更多关于第一次尝试，稍后。

第二次尝试的错误之处在于，它说捏入就是捏出，甚至点击或点击都是捏出。

我的第二次尝试是在这个JS Fiddle中：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
});

以下是我第一次尝试的内容。我让它发挥了作用，但当我把它和我的网站结合起来时，它突然不起作用了。

我第一次尝试这样做时，使用了hammer.js的jQuery版本（http://eightmedia.github.io/hammer.js/）——一个有点著名的多点触摸手势库。我成功地完成了它，除了我需要它工作的网站之外。这里是在课堂上工作。宝丽来（图像），试着捏住它们，它们按y比例缩小并捏住它们会发出警报：http://goo.gl/oOQDH0.然而，当我在我需要它工作的网站上应用相同的js时，它突然不工作了。所有的依赖关系都在那里。没有错误。此外，由于某些原因，滚动在某种程度上被禁止（在触摸设备上很难做到）。它与应用于.dataCard类（标头下的白色矩形）的代码完全相同，但无法工作：http://goo.gl/dagKxT

我将非常、非常感谢为开发和运行这种互动提供的任何帮助。提前感谢！

不是要解雇或劝阻你这样做，但你自己写这篇文章有什么特别的原因吗？

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

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

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

你可能已经做过研究，见过很多这样的库，但Hammer的代码库布局非常好，很容易理解。

如果你要从头开始尝试，你可能会在一开始就检测到一个手势，并用一个通用标志将其锁定（这样其他手势就不会出现），然后在手势完成时重置标志。

相关文章：