双指缩放实例(同事写的,不是转载也不是原创)

huruqing

浏览: 4157 次

最近访客更多访客>>

只有自己懂

guopengju

ml7560809

qjh1985

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

html

<!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>

分享到：