jquery - 触摸缩放不适用于 jQuery Panzoom
问题描述
我已将 jQuery Panzoom 添加到我的项目中。我正在全屏显示图像,我想让用户能够在 iOS 设备上放大该图片。平移有效,但缩放无效,我不知道为什么。启用设备模拟后,它在 Chrome 调试监视器中也不起作用。
即使有演示,捏缩放似乎也不起作用。插件坏了,还是我傻?
https://github.com/timmywil/panzoom
我正在创建动态包含图像的 div。
zoomThumb: function (d, e) {
let $imgPopup = $('<div>').addClass('fullScreenImage').appendTo($('body')).fadeIn();
let $panzoom = $('<img>').attr('src', d.src.replace('Thumb/', '')).appendTo($imgPopup);
$panzoom.panzoom({ disableZoom: false});
// Mouse wheel zoom
$imgPopup.on('mousewheel.focal', function (e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
animate: false,
focal: e
});
});
// Close button
$('<div>').append($('<i>').addClass('fa').addClass('fa-times')).appendTo($imgPopup).click(function () {
$imgPopup.fadeOut({ done: () => { $imgPopup.remove(); } });
});
e.stopPropagation();
}
.fullScreenImage {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
display: none;
}
.fullScreenImage > img {
margin: auto;
display: block;
width: 80%;
}
.fullScreenImage > div {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.fullScreenImage > div:hover,
.fullScreenImage > div:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
你知道如何解决这个问题吗?
解决方案
在我的项目中,我需要禁用平移事件,而捏和鼠标滚轮事件不起作用。但是,如果您查看此示例,则可以独立启用它。
https://timmywil.com/panzoom/demo/
const panzoom = Panzoom(elem)
const parent = elem.parentElement
// No function bind needed
parent.addEventListener('wheel', panzoom.zoomWithWheel)
// This demo binds to shift + wheel
parent.addEventListener('wheel', function(event) {
if (!event.shiftKey) return
panzoom.zoomWithWheel(event)
})
对我来说,这种方法奏效了。我希望能帮助你。
推荐阅读
- graphql - AppSync 中的 GraphQL 字段级验证
- c# - 无法在选择列表中保存多个选择 - asp.net core web app razor pages
- c# - C# 8 在返回具有可空约束的可空泛型时发出警告
- ios - 尝试使用 babel-plugin-proposal-class-properties 时使用 .babelrc 的语法加倍
- mysql - 如何优化我的 Google Cloud SQL (MySQL) 数据库以与 API 一起使用
- php - 打印调试堆栈跟踪(在块内)
- swift - 如何在一个 iOS 应用中运行两种不同的 ARKit 体验
- c - 为什么 scanf 函数不接受转义序列作为输入?
- c++ - 你能动态生成一个初始化列表吗?
- c# - 如何将 Flurl 与 HttpClient 实例一起使用