html - 适用于 Android 和 iPad 的 jQuery 移动/JavaScript 图像缩放

标签 html css jquery-mobile touch multi-touch

我一直在寻找一种简单的解决方案来解决如何在不影响网站其余部分的情况下放大和缩小图像 (png),但一无所获。

你们中有人使用过这样的工具或知道使用 jQuery 或 javascript 执行此操作的方法吗?我是 jQuery 的新手,所以不知道应该查看哪些事件。此功能应适用于 Android 平板电脑和 iPad。

看了JQuery Mobile Pinch Zoom Image Only以及所提供的链接,但显然这些链接适用于使用 PhoneGap 的用户。

感谢您的帮助。

最佳答案

我也没有找到解决方案,所以我自己实现了它(使用 vanilla JS 和 canvas 但可移植到 css3):https://github.com/rombdn/img-touch-canvas

示例:http://www.rombdn.com/img-touch-canvas/demo (更好地使用触摸设备,但在桌面上使用 +/- 和鼠标拖动)

<html>
<body>
    <div style="width: your_image_width; height: your_image_height">
        <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <script src="img-touch-canvas.js"></script>
    <script>
        var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "your image url"
        });
    </script>
</body>
</html>

关于html - 适用于 Android 和 iPad 的 jQuery 移动/JavaScript 图像缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12826317/

相关文章:

javascript - Bootstrap 修复 IE 和 Firefox 的滚动问题

jquery - 无限轮播不起作用

jQuery Mobile 绑定(bind)事件

javascript - 悬停突出显示多个 div 标签

html - 汉堡 Menù BootStrap

javascript - jQuery 获取 DOM 元素的方法

jquery - CSS 响应式导航菜单默认展开

html - Flexboxes : stacked, 居中、环绕、颜色匹配的边和动态、同步的宽度(见示例)

jquery - 使用 json 数据填充 iframe

Jquery移动: Forcing refresh of content