Question

完全归功于Michael Chaize和他的教程（http://creativedroplets.com/html5-and-multitouch-hammer-js/），我一直在努力调整他的代码来缩放固定设备宽度webapp中的图片。

下面的代码适用于单个图片，但我很难理解如何让它在我的rails应用中动态生成图像列表。

为了说明，下面的代码包括一个完整工作的示例页面，其中javascript明确地绑定到显示的第一个图像。我希望代码能够检测到正在选择哪个图像，以便页面中的任何图像都可以缩放（目前第二个图像被忽略，因为我不知道如何优雅地将javascript关联到页面上的多个图像）。

Hammer.js包含在标题中（尽管未在代码片段中显示）并且在第一张图像上正常工作。

从问题可以看出，javascript不是我的强项，所以任何指针都会非常感激。

<div id="zoomwrapper1">
  <div id="zoom1" class="zoomProps" >
    <div id="rect1" class="polaroid">
        <img id="rect" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>

<div id="zoomwrapper2">
  <div id="zoom2" class="zoomProps" >
    <div id="rect2" class="polaroid">
        <img id="rect2" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>


<script>

    var hammertime = Hammer(document.getElementById('zoomwrapper1'), {
            transform_always_block: true,
            transform_min_scale: 1,
            drag_block_horizontal: true,
            drag_block_vertical: true,
            drag_min_distance: 0
        });

        var posX=0, posY=0,
            lastPosX=0, lastPosY=0,
            bufferX=0, bufferY=0,
            scale=1, last_scale,
            rotation= 1, last_rotation, dragReady=0;

        hammertime.on('touch transform', function(ev) {
            elemRect = document.getElementById('zoom1');
            manageMultitouch(ev);
        });


    function manageMultitouch(ev){

    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;

            break;

        case 'drag':
                posX = ev.gesture.deltaX + lastPosX;
                posY = ev.gesture.deltaY + lastPosY;
            break;

        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
            lastPosX = posX;
            lastPosY = posY;
            break;
    }

    var transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";

    elemRect.style.transform = transform;
    elemRect.style.oTransform = transform;
    elemRect.style.msTransform = transform;
    elemRect.style.mozTransform = transform;
    elemRect.style.webkitTransform = transform;
}
</script>

Answer 1

如果您想使用多个元素，请将锤子添加到容器中，然后在侦听器函数上，检查相应的元素：

<div id="box-container">
    <div id="box0" class="box">1</div>
    <div id="box1" class="box">2</div>
    <div id="box2" class="box">3</div>
    <div id="box3" class="box">4</div>
    <div id="box4" class="box">5</div>
</div>

在JavaScript中

var hammertime = Hammer(document.getElementById("#box-container"));

hammertime.on('desired-event', function(evt) {

    if(evt.target.className.indexOf("box") > -1);

        //do the stuff

    }

});

这里有一个使用jQuery的工作示例（在多点触控设备上测试）：

jsfiddle

使用Hammer.js进行缩放

1 个答案: