使用hammer.js 缩放div答案

【问题标题】：scale div using hammer.js使用hammer.js 缩放div
【发布时间】：2014-07-19 10:48:12
【问题描述】：

嗨朋友们，我在移动网站上工作，在这个网站上有一个 div#someId 有 <img> 我使用 css height:100%; height:auto; 修复了图像的高度和宽度

现在的要求是我想调整div#someId 的大小并且还想拖动它

我在我的代码中实现了hammer.js 以启用对pinchzoom 和pinchout 和div#someId 的多点触控，但无法理解如何完成此操作

有没有其他出路可以完成这个任务。你可以在下面查看我的代码

脚本

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script src="hammer.min.js"></script>

<script type="text/javascript">
window.addEventListener('load', function() { 
    var element = document.getElementById('tapdiv');
    var hammertime = Hammer(element).on("tap", function(event) {
        alert('hello!');
    })

}, false);
</script>

HTML

<div id="tapdiv" style="width:200px; height:200px; background:red; color:#fff;">asd</div>

请帮帮我..提前谢谢..

【问题讨论】：

标签： jquery multi-touch resizable hammer.js

【解决方案1】：

几天前我已经这样做了。您可以在以下位置查看示例：http://m.v-s-b.de/de/strecken-skizzen/vsb-tarifzonenplan/

您必须使用以下样式表创建一个 div 容器

.imageWindow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.imageWindow img {
    -ms-transform: scale(1) translate(0px, 0px);
    -webkit-transform: scale(1) translate(0px, 0px);
    transform: scale(1) translate(0px, 0px);
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    position: relative;
}

现在有了hammerjs，你可以在这个div中平移和拖动img。

我使用过 canJS 2 和hammerJS 1.1.3 随意查看我的代码http://jsfiddle.net/wpLJQ/

canJS Map 解决方案可能不是最好的，它可以更容易

编辑：这是我没有canJS的第一个解决方案 http://jsfiddle.net/fnCaP/

【讨论】：