JS ipad图片拖动缩放

使用JS处理触摸事件，实现图片的拖动缩放。

将网页添加到主屏时，设置图标

<link rel="apple-touch-icon-precomposed" href="images/icon.png">

禁止IPAD自己的页面缩放功能

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

禁止页面的整体拖动

document.body.addEventListener('touchmove', function (e)
{
        e.preventDefault();
}, false);

添加触摸事件

document.addEventListener('touchstart', img_mousedown, false);
document.addEventListener('touchend', img_mouseup, false);
document.addEventListener('touchmove', img_mousemove, false);

获取手指位置

在event中包含三个关于手指信息的数组：targetTouches changedTouches touches

touches ：当前位于屏幕上的所有手指的一个列表。
targetTouches ：位于当前DOM元素上的手指的一个列表。
changedTouches ：涉及当前事务的手指的一个列表。

当处理touchend时，当两个手指操作时，在抬起1个手指或2个手指同时抬起时都会触发。
当1个手指抬起时，changedTouches里存着抬起的手指信息，touches里存着未抬起的手指信息。
当2个手指同时抬起时，changedTouches里存着两个抬起的手指信息。而touches未空。

横竖屏切换时

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
// 平板横竖切换时触发。
window.addEventListener(orientationEvent, function ()
{
     alert('横竖切换');
});

 

下载实例：https://files.cnblogs.com/zjfree/test_ipad.rar