移动端点击图片放大

楼主
我是社区第259932位番薯,欢迎点我头像关注我哦~
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显示内容,二进制的没试过。

分享扩散:

沙发
发表于 2024-12-4 08:27:48
为何不直接试试我的方案呢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表