移动端点击图片放大
document.querySelectorAll('#myImg').forEach(item => {
item.addEventListener('click', event => {
// 创建弹出层和内容
const overlay = document.createElement('div');
const overlayImg = document.createElement('img');
const closeBtn = document.createElement('span');
// 设置弹出层样式
overlay.style.display = 'flex';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.background = 'rgba(0,0,0,0.8)';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
// 设置图片
overlayImg.src = item.src;
overlayImg.style.maxWidth = '100%';
overlayImg.style.maxHeight = '80%';
// 设置关闭按钮
closeBtn.innerHTML = '×';
closeBtn.style.position = 'absolute';
closeBtn.style.top = '20px';
closeBtn.style.right = '30px';
closeBtn.style.color = 'white';
closeBtn.style.fontSize = '30px';
closeBtn.style.cursor = 'pointer';
// 点击关闭按钮事件
closeBtn.onclick = function() {
document.body.removeChild(overlay); // 移除弹出层
}
// 添加图片和关闭按钮到弹出层
overlay.appendChild(closeBtn);
overlay.appendChild(overlayImg);
document.body.appendChild(overlay); // 添加到文档中
// 点击弹出层任意区域关闭弹出层
overlay.addEventListener('click', function(event) {
if (event.target === overlay) {
document.body.removeChild(overlay);
}
});
// 添加缩放功能
let scale = 1;
overlayImg.addEventListener('wheel', (event) => {
event.preventDefault();
if (event.deltaY < 0) {
scale *= 1.1; // 放大
} else {
scale /= 1.1; // 缩小
}
overlayImg.style.transform = `scale(${scale})`;
});
});
});
以上代码，可以实现移动端点击图片放大，代码放在加载结束事件里面，但是不能对弹出的图片进行放大缩小，有大佬可以帮忙看看吗（移动端属性的允许双击/双指缩放功能打开和关闭都不行）？
PS：1、代码是AI（FittenCode）写的。
2、需要先在管理平台--》移动端--》H5设置--》引入js，，填上jquery.js的路径。
3、图片支持路径格式的，用HTML显示内容，二进制的没试过。
