2012-10-15 37 views
9

什麼是涉及捏放大或縮小的JavaScript或jQuery或jQuery的移動事件?我正在嘗試捕獲這些事件以放大和縮小div中的圖像,而不會影響網站的整個佈局。 Simplest way to detect a pinch適用於iPad,但不適用於Android。捏放大,縮小 - 安卓平臺上的Web/jquery/jQuery的移動事件?

在android平臺上爲web檢測相同的方法是什麼?

任何幫助表示讚賞。

編輯:我一直在努力touchy.js,並且適用於做放大和縮小的圖像,但是,放大成圖像是沒有用的,如果圖像的部分不是用手指輕掃或東西訪問那種

例如,請考慮下面的代碼:

<div style=" border: 1px solid blue; width: 560px; overflow:scroll;"> 
     <p>&nbsp;</p> 
     <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" /> 
    </div> 

我需要的形象留在格內,用戶應該能夠在他們放大到圖像周圍移動,但與此代碼,我必須在空白區域(由段落標記創建)上滑動我的手指才能水平移動到圖像的不同部分。垂直方向也是如此(您必須在網頁上的空白區域上滑動手指才能看到圖像的長度)。我想說的是,在圖像內部的滑動運動沒有任何影響而用戶在放大圖像後期望這樣做。

這是很難解釋沒有一個例子,我試圖創建http://jsfiddle.net/Debarupa/8peaf/,但它不工作,因爲我不喜歡它,因爲我不能編輯頭元。我需要補充:

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" /> 

使整個網頁不可縮放。

回答

9

您可以通過監視用戶的手勢並跟蹤手指的接觸點來計算自己的比例。

喜歡的東西:

var tracks = []; 
$myElement.on("touchmove", function (event) { 

    //only run code if the user has two fingers touching 
    if (event.originalEvent.touches.length === 2) { 

     //track the touches, I'm setting each touch as an array inside the tracks array 
     //each touch array contains an X and Y coordinate 
     tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]); 
    } 
}).on("touchstart", function() { 
    //start-over 
    tracks = []; 
}).on("touchend", function() { 
    //now you can decide the scale that the user chose 
    //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other 
}); 

但是,如果你想使用一些預先做好的話,我建議檢查出暴躁:https://github.com/HotStudio/touchy

+0

感謝您的快速回復。當我有機會時,我會嘗試這個。 – WhatsInAName

+0

我選擇使用touchy(並且回想起之前我也這樣做了,發現了一些問題,所以這次嘗試自己做這件事)。問題是,雖然它放大和縮小都很好,但放大後無法通過滑動來移動圖像。下面是示例(http://jsfiddle.net/Debarupa/8peaf/),但不能弄清楚如何在jsfiddle中編輯應該具有user-scalable = no的頭部的視口元,以防止整個頁面放大/縮小。 – WhatsInAName

+0

非常有用,@Jasper,謝謝! –