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

2023年5月22日 215次阅读

我正在尝试开发一种我设计的交互,其中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

我非常感谢任何和所有帮助,以促进这种互动的发展和工作.
提前致谢！

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

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

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

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

你可能已经完成了你的研究并看到了很多像这样的库,但Hammer的代码库确实很好,很容易理解.

如果你打算从头开始,你可能最终会在开始时检测到一个手势并用一个公共标志将其锁定(因此其他手势不会启动),然后在手势完成时重置标志.

点赞