0

まず第一に、ピンチ ズームを実装し、hammer.js からイメージにドラッグすると、うまく機能します。問題は、ズームインして画像をドラッグすると、ページ全体が従うように見えます.user-scallableをnoに設定していますが、問題はまだ存在します.解決策はありますか?

<html>
<head>
    <meta charset="utf-8">
    <title>About</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">   
    <link rel="stylesheet" href="style.css">
    <script src="craftmap.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="hammer.min.js" type="text/javascript"></script>
     <script src="hammer.js" type="text/javascript"></script>
     <script src="hammer.fakemultitouch.js" type="text/javascript"></script>
     <script src="hammer.showtouches.js" type="text/javascript"></script>
<div class="content">           
        <div id="pinchzoom">
        <img src="images/map.jpg" width="628" height="300" id="rect" alt="Zoo"><div>

それの脚本

var hammertime = Hammer(document.getElementById('pinchzoom'), {



        transform_always_block: true,
        transform_min_scale: 1,
        drag_block_horizontal: false,
        drag_block_vertical: false,
        drag_min_distance: 0
    });



var rect = document.getElementById('rect');




var posX=0, posY=0,
    scale=1, last_scale,
    last_posX=0, last_posY=0,
    max_pos_x=0, max_pos_y=0;

hammertime.on('touch drag transform dragend', function(ev) {
    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            break;

        case 'drag':
            if(scale != 1){
                    posX = saved_posX + ev.gesture.deltaX;
                    posY = saved_posY + ev.gesture.deltaY;
                    if(posX > max_pos_x){
                        posX = max_pos_x;
                    }
                    if(posX < -max_pos_x){
                        posX = -max_pos_x;
                    }
                    if(posY > max_pos_y){
                        posY = max_pos_y;
                    }
                    if(posY < -max_pos_y){
                        posY = -max_pos_y;
                    }
            }else{
                posX = 0;
                posY = 0;
                saved_posX = 0;
                saved_posY = 0;
            }
            break;

        case 'transform':
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            max_pos_x = Math.ceil((scale - 1) * rect.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * rect.clientHeight / 2);
            if(posX > max_pos_x){
                posX = max_pos_x;
            }
            if(posX < -max_pos_x){
                posX = -max_pos_x;
            }
            if(posY > max_pos_y){
                posY = max_pos_y;
            }
            if(posY < -max_pos_y){
                posY = -max_pos_y;
            }
            break;
        case 'dragend':
            last_posX = posX < max_pos_x ? posX: max_pos_x;
            last_posY = posY < max_pos_y ? posY: max_pos_y;
            break;
    }

    // transform!
    var transform =
            "translate3d(0, 0, 0) " +
            "scale3d(1, 1, 0) "; 
    if(scale != 1){
        transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";
    }

    rect.style.transform = transform;
    rect.style.oTransform = transform;
    rect.style.msTransform = transform;
    rect.style.mozTransform = transform;
    rect.style.webkitTransform = transform;

});
4

1 に答える 1

0

preventDefault を使用する

hammertime.on('touch drag transform dragend', function(ev) {
ev.gesture.preventDefault()
于 2013-12-19T19:25:20.913 に答える