<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" name="viewport"/>
<title>手指</title>
<style>
.bg-model{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.rect{position:absolute;width:60px;height:60px;border:1px dashed #f00}
.resize{position:absolute;width: 30px;height: 30px;bottom: -15px;right: -15px;background: rgb(163, 146, 54)
}
</style>
</head>
<body>
<div class="bg-model" id="div1">
<div class="rect" id="div2" style="top:10px;left:10px;width: 60px;">
<p id="DebugTXT"></p>
<div class="resize" id="div3"></div>
</div>
</div>
<script>
var d1=document.getElementById('div1'),d2=document.getElementById('div2') ,d3=document.getElementById('div3');
var Moving,Resizing;
var startX,startY,sideLen=60;
d1.addEventListener('touchstart',touchStart,true);
d1.addEventListener('touchmove',touchMove,true);
d1.addEventListener('touchend',touchEnd,true);
var twoFinger;
var pos1={x:0,y:0},pos2={x:0,y:0};
var pos12={x:0,y:0},pos22={x:0,y:0};
function touchStart(e){
var el = e.target;
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
if(e.touches.length==2){
twoFinger=true;
pos1.x=e.touches[0].clientX; pos1.y=e.touches[0].clientY;
pos2.x=e.touches[1].clientX; pos2.y=e.touches[1].clientY;
return;
}else{twoFinger=false;}
var touch= e.touches[0];
if (el.id == 'div2') {
Moving = true;
Resizing = false;
startX=touch.clientX-parseInt(d2.style.left);
startY=touch.clientY-parseInt(d2.style.top);
} else if (el.id == 'div3') {
Moving = false;
Resizing = true; sideLen=parseInt(d2.style.width);
startX=touch.clientX;
startY=touch.clientY;
d3.style.display='none';
}twoFinger=false;
}
function touchMove(e){
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
e.stopPropagation();
e.preventDefault();
if (e.changedTouches.length == 2) {
twoFinger = true;
pos12.x = e.changedTouches[0].clientX;
pos12.y = e.changedTouches[0].clientY;
pos22.x = e.changedTouches[1].clientX;
pos22.y = e.changedTouches[1].clientY;
return;
}
var touch = e.changedTouches[0];
if (Moving) {
var endX = touch.clientX, endY = touch.clientY;
d2.style.left = endX - startX + 'px';
d2.style.top = endY - startY + 'px';
} else if (Resizing) {
var endX = touch.clientX, endY = touch.clientY;
var increase = Math.min(endX - startX, endY - startY);
d2.style.width = sideLen + increase + 'px';
d2.style.height = sideLen + increase + 'px';
}
}
function touchEnd(e){
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
if(e.touches.length==0&&twoFinger){
twoFinger=false;
var len1=Math.pow(Math.pow(pos1.x-pos2.x,2)+Math.pow(pos1.y-pos2.y,2),0.5).toFixed(0);
var len2=Math.pow(Math.pow(pos12.x-pos22.x,2)+Math.pow(pos12.y-pos22.y,2),0.5).toFixed(0);
//alert('len1:'+len1+',len2:'+len2);
var newL=len2-len1>0?1.5:0.5;
sideLen=parseInt(d2.style.width);
d2.style.width =d2.style.height =sideLen*newL+ 'px';
}
Moving=Resizing=false; d3.style.display='block';
}
</script>
</body>
</html>
双指缩放实例(同事写的,不是转载也不是原创)
猜你喜欢
转载自huruqing.iteye.com/blog/2058856
今日推荐
周排行