TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
/*
* @Author 兔爺
* @function 實(shí)現(xiàn)單指拖動(dòng)圖片，雙指縮放圖片
* @marks 參數(shù)one是為了區(qū)分屏幕上現(xiàn)在是一根手指還是兩根手指，因?yàn)樵诨瑒?dòng)的時(shí)候兩根手指先離開(kāi)一根會(huì)觸發(fā)一根手指移動(dòng)圖片位置這個(gè)方法
*/
var touchScale = function(seletor, bg) {
var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,
one = false,
$touch = $(seletor),
originalWidth = $touch.width(),
originalHeight = $touch.height(),
baseScale = parseFloat(originalWidth/originalHeight),
imgData = [],
bgTop = parseInt($(bg).css('top'));
function siteData(name) {
imgLeft = parseInt(name.css('left'));
imgTop = parseInt(name.css('top'));
imgWidth = name.width();
imgHeight = name.height();
}
$(document).on('touchstart touchmove touchend', $(seletor).parent().selector, function(event){
var $me = $(seletor),
touch1 = event.originalEvent.targetTouches[0], // 第一根手指touch事件
touch2 = event.originalEvent.targetTouches[1], // 第二根手指touch事件
fingers = event.originalEvent.touches.length; // 屏幕上手指數(shù)量
//手指放到屏幕上的時(shí)候，還沒(méi)有進(jìn)行其他操作
if (event.type == 'touchstart') {
if (fingers == 2) {
// 縮放圖片的時(shí)候X坐標(biāo)起始值
startX = Math.abs(touch1.pageX - touch2.pageX);
one = false;
}
else if (fingers == 1) {
x1 = touch1.pageX;
y1 = touch1.pageY;
one = true;
}
siteData($me);
}
//手指在屏幕上滑動(dòng)
else if (event.type == 'touchmove') {
if (fingers == 2) {
// 縮放圖片的時(shí)候X坐標(biāo)滑動(dòng)變化值
endX = Math.abs(touch1.pageX - touch2.pageX);
scale = endX - startX;
$me.css({
'width' : originalWidth + scale,
'height' : (originalWidth + scale)/baseScale,
'left' : imgLeft,
'top' : imgTop
});
}else if (fingers == 1) {
x2 = touch1.pageX;
y2 = touch1.pageY;
if (one) {
$me.css({
'left' : imgLeft + (x2 - x1),
'top' : imgTop + (y2 - y1)
});
}
}
}
//手指移開(kāi)屏幕
else if (event.type == 'touchend') {
// 手指移開(kāi)后保存圖片的寬
originalWidth = $touch.width(),
siteData($me);
imgData = [[imgLeft, imgTop-bgTop, imgWidth, imgHeight],[0, 0, 640, 640]];
}
});
var getData = function(){
return imgData;
};
return {
imgData : getData
}
};
這是我之前寫(xiě)的單指拖動(dòng)，雙指縮放的js代碼，希望對(duì)你有所幫助，用前請(qǐng)調(diào)用jquery。
舉報(bào)