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('橫豎切換');
});

 

下載實例:http://files.cnblogs.com/zjfree/test_ipad.rar


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM