按住或使用鼠标滚轮进行缩放

Question

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

在台式机中，可以通过鼠标滚轮来放大/缩小图像，在触摸屏设备上，可以使用两个手指手势来放大/缩小。

我会使用上面提到的库，但是6美元似乎有点太多了。我确实发现了一些其他的开源库，但它们并不具备这两个特性。

我正在构建一个静态站点，它动态地(使用javascript)加载单个图像。

Answer 1

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

• e.wheelDelta (除火狐和歌剧之外的所有浏览器) and
• e.detail (用于火狐和歌剧)。

向下滚动时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)";
}

当然，您也可以通过根据确切的delta值修改scale来创建更复杂的函数。

Answer 2

您可以使用touchy库

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

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

为了实现两个手指的拖动，触摸事件包含一个属性touches

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

还可以签出this