捏或鼠标滚轮进行缩放

Question

我需要像这个演示的功能：http://preview.codecanyon.net/item/pinch-zoomer-jquery-plugin/full_screen_preview/6623080

在桌面设备中，可以通过鼠标滚轮和触摸屏设备放大/缩小图像，可以使用2个手指手势进行放大/缩小。

我会使用上面提到的库，但是6美元看起来有点太多了。我确实找到了其他一些开源库，但他们没有这两个功能。

我正在构建一个动态（使用javascript）加载单个图像的静态网站。

Answer 1

要获得所需的结果，您可以使用onmousewheel事件，并在触发时将其设置为根据以下内容更改图像的transform: scale(1, 1)：

• e.wheelDelta（除Firefox和Opera之外的所有浏览器）和
• e.detail（适用于Firefox和Opera）。

向下滚动时，e.wheelDelta和e.detail为负值，向上滚动时为正数。

示例：

var image = your image id;
image.onmousewheel = function(e) {
    var delta = e.detail || e.wheelDelta;
    image.style.transform = (delta > 0) ? "scale(2, 2)" : "scale(0.5, 0.5)";
}

您当然可以根据确切的scale值修改delta来创建更复杂的功能。

Answer 2

您可以使用touchy库

只需在图像上调用一个事件，并根据收到的比例参数，也可以改变回调中的图像比例。

$('#my_div').bind('touchy-pinch', handleTouchyPinch);

并且为了实现2次手指拖动，触摸事件包含属性touches

$elem.on('touchstart', function (e) {
    if (e.touches.length > 1)
        // your rocking code here...
});

也结帐this