Question

嗨朋友我正在移动网站上浏览，在这个网站上有一个div#someId <img>我使用css height:100%; height:auto;

修复了图片的高度和宽度

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

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

还有其他方法可以完成此任务。你可以查看下面的代码

SCRIPT

<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>

PLease帮帮我们..提前谢谢..

Answer 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 soltuion不是最好的，它可以更容易

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

使用hammer.js缩放div

1 个答案: