<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1 , maximum-scale=1">
<script type="text/javascript" src="hammer.min.js"></script>
<style>
body{padding:0; overflow:hidden;}
#pinchzoom{overflow:hidden; width:300px; height:300px; background-color:#eee;}
</style>
</head>
<body>
<div id="pinchzoom">
    <img id="img" src="http://pr.bdimg/static/princess/img/misc/baidu_logo_c352a179.gif" οndragstart="return false" alt="" />
</div>
<script>
var hammertime = Hammer(document.getElementById('pinchzoom'),{
    transform_always_block:true,
    transform_min_scale:0.5,
    drag_block_horizontal:true,
    drag_block_vertical:true,
    drag_min_distance:0
});

var img = document.getElementById('img');
//初始值
var posX = 0,
    posY = 0,
    last_posX,
    last_posY,
    scale = 1,
    last_scale,
    rotation = 0,
    last_rotation;

hammertime.on('touch drag transform',function(e){
    switch(e.type){
        //当touch开始时，记录下当前的缩放量，旋转量和位移量
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;
            last_posX = posX;
            last_posY = posY;
            break;
        //拖拽时改变位移量
        case 'drag':
            posX = last_posX + e.gesture.deltaX;
            posY = last_posY + e.gesture.deltaY;
            break;
        case 'transform':
            rotation = last_rotation + e.gesture.rotation;
            scale = Math.min(last_scale* e.gesture.scale,10);
            break;
    }
    //使用CSS3 transform进行图片的变换
    var transform = "translate3d("+posX+"px,"+posY+"px,0)"+"scale3d("+scale+","+scale+",1)"+"rotate("+rotation+"deg)";
    img.style.webkitTransform = transform;
})
</script>
</body>
</html>

更多推荐

hammer实现拖动旋转和缩放