hammer使用: 代码：捏合、捏开、图片放大的一个手机图片“放大缩小可拖动”的小效果

hammer.js 的使用。（手机手势插件）

捏合、捏开、图片放大的一个手机图片“放大缩小可拖动”的小效果。

相关js 到 http://www.bootcdn.cn/ 查找和下载。 hammer.js的版本是 v2.0.4

效果说明：

1、（捏开——这个词我不知道咋说了）就是触屏后，双指向外展开。

图片放大到2倍。

并且计算当前的事件点，以此为中心，在屏幕原处放大。（实际上以左上角为中心，然后计算偏移量）

2、捏合

图片缩小回原始状态

3、放大后的滑动事件

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

注意这句话。刚开始没加这句话的时候，发现 swipeleft 和 swiperight 事件好用，但swipeup 和 swipedown 无效

开始时还想用 pan 事件，但 pan事件是拖动，它需要更多的时间

另外还加了判断，所以只有scale放大到2倍时，才能使用滑动事件

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch</title>
<script src="script/jquery.min.js"></script>
<script src="script/hammer.min.js"></script>
<style type="text/css">
html, body {width:100%;height:100%;margin:0;padding:0;}
.pinch-zoom-container {overflow: hidden;position: relative;}
.pinch-zoom, .pinch-zoom-container {width: 100%!important;height: 100%!important;}
.pinch-zoom{position:absolute;}
.pinch-zoom img{position:absolute;width:100%;left:50%;top:50%;}
</style>
</head>
<body>
<!-- ***************************** -->
<div class="pinch-zoom-container">
    <div class="pinch-zoom" id="test" data-scale="1">
        <img src="2.jpg" id="testimg">
    </div>
</div>
<!-- ***************************** -->
<script type="text/javascript">
$(function(){
    $("img").load(function(){
        $(this).css("marginLeft",(-1*$(this).width()/2)+"px");
        $(this).css("marginTop",(-1*$(this).height()/2)+"px");
    });

    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer($(".pinch-zoom")[0]);
    //var hammertime = new Hammer(document.getElementById("test"));
    hammertime.get('pinch').set({ enable: true });
    hammertime.add(new Hammer.Pinch());
    //hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });//横向和纵向的swipe事件
    hammertime.get('swipe').set({ threshold: 0 });//识别之前所需的最小距离
    hammertime.get('swipe').set({ velocity: 0.2 });//识别之前所需的最小距离

    
//捏开
hammertime.on("pinchout", function (e) {
        console.log(">>>>>>>>>>>>>>>>");
        var W = $("#testimg").width();
        var H = $("#testimg").height();
        var scale = 2;
        //var mouseX=e.pageX;//鼠标
        //var mouseY=e.pageY;
        var mouseX=e.center.x;//捏开点
        var mouseY=e.center.y;

        if($("#test").attr("data-scale")==1){
            var translateX=0;
            var translateY=0;
            //计算当前点击点相对于图片的偏移比例
            var posX = mouseX/W;
            var posY = mouseY/H;
            translateX= (W * posX / scale) * -1;
            translateY= (H * posY / scale) * -1;
            
            console.log("###["+translateX+"]###");
            $("#test").css("transformOrigin","0% 0%");
            $("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");
            $("#test").attr("data-x",translateX);
            $("#test").attr("data-y",translateY);
            $("#test").attr("data-scale",2);
            
            console.log("点击点的百分比>>>   "+posX+","+posY+"                  ");
            console.log("偏移>>>   "+translateX+","+translateY+"                  ");
            //console.log("鼠标："+mouseX+","+mouseY+"                  ");
            //console.log("捏开开开开>>>>  " + e.center.x + "," + e.center.y+"                  ");
            //console.log("x————————"+ $("#test").attr("data-x") );
            //onsole.log("y————————"+ $("#test").attr("data-y") );
            
            
        }

});
//捏合
hammertime.on("pinchin", function (e) {
    $("#test").css("transformOrigin","scale(1,1)");
    $("#test").css("transform","scale(1,1) translate(0px,0px)");
    $("#test").attr("data-x",0);
    $("#test").attr("data-y",0);
    $("#test").attr("data-scale",1);
    console.log("捏合合合合>>              " );
});


function move123(x,y){
    //console.log($("#test").attr("data-scale")+"【】【】")
    if($("#test").attr("data-scale")==2){
        var W = $("#testimg").width();
        var H = $("#testimg").height();
        var winW = $(document).width();
        var winH = $(document).height();

        var marginTop = (winH - H) * -1/2;
        var marginLeft = winW * -1/2 ;
        var marginBottom = -1 * ( winH / 2 -(-1 * marginTop));
        //console.log("marginTop="+marginTop);
        //console.log("marginBottom="+marginBottom);

        var translateX = $("#test").attr("data-x");
        var translateY = $("#test").attr("data-y");
        translateX = parseFloat(translateX) + x;
        translateY = parseFloat(translateY) + y;
        
        //console.log("marginBottom————::: "+ marginBottom +"           ]");
        //console.log("原始的：translateX = "+ translateX + "      " +"translateY = " + translateY);
        if(translateX>0){translateX=0;console.log("分支: 左往右拨动");}
        if( translateX < marginLeft ){translateX = marginLeft;console.log("分支: 右往左拨动");}
        if( translateY < marginTop ){translateY = marginTop;console.log("分支: 下往上拨动");}
        if( translateY > marginBottom ){translateY = marginBottom;console.log("分支: 上往下拨动");}
        //console.log("改了的：translateX = "+ translateX + "      " +"translateY = " + translateY);

        
        $("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");
        $("#test").attr("data-x",translateX);
        $("#test").attr("data-y",translateY);
        $("#test").attr("data-scale",2);
    }
}

hammertime.on("swipe", function (e) {
    //console.log("事件发生点(deltaX) x: "+e.deltaX + "(deltaY)  y: "+e.deltaY);
    if($("#test").attr("data-scale")==2){
        //console.log("拖动结束  " + e.deltaX + "," + e.deltaY);
        move123(e.deltaX,e.deltaY);
    }
});

});

    </script>
</body>
</html>

............

hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

hammer使用: 代码：捏合、捏开、图片放大的一个手机图片“放大缩小可拖动”的小效果