纯JS图片查看器

你怎么瘦的像条狗一样
已于 2022-10-20 09:50:46 修改
阅读量726
点赞数 1
分类专栏： JavaScript 实用插件文章标签： javascript 前端 html
于 2022-09-30 20:17:59 首次发布
本文链接：https://blog.youkuaiyun.com/qq_37739698/article/details/127128668
版权
JavaScript 同时被 2 个专栏收录
5 篇文章
订阅专栏
实用插件
2 篇文章
订阅专栏
本文档介绍了一个轻量级的图片查看器实现，支持图片的放大、缩小（包括滚轮操作）、旋转和还原功能。通过点击图片，会在页面上弹出一个遮罩层，包含图片和操作按钮，用户可以使用提供的按钮或滚轮进行操作。此外，还支持图片的拖拽功能，允许用户自由调整图片位置。源代码已上传至Gitee仓库，供开发者参考和使用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
目前支持：放大、缩小（含滚轮）、旋转、还原
/**
 * @说明信息
 * @date 2022/10/13 19:46:44
 * @初始化图片查看器
 * @date 2022/09/21 14:40:06
 * @id 唯一标识，指定id区域内的图片
 * @params 扩展参数，设置图片大小，目前只支持：案例:{ width: '100%', height: '100%' }
 * @ignoreImg 需要忽略的图片，需加在图片标签上，案例：<img src="" ignoreImg>
 ************************************/

export function photoInfo (id, params) {
    // 获取根节点
    const bodyDom = document.body
    // 获取指定ID范围内的图片列表
    const imgList = document.getElementById(id).getElementsByTagName('img')
    // 给图片设置点击事件
    if (imgList.length > 0) {
        let i = 0
        for (i; i < imgList.length; i++) {
            if (imgList[i].getAttribute('ignoreImg') === null) {
                imgList[i].onclick = function (ev) {
                    // 禁止浏览器滚动
                    bodyDom.style.overflow = 'hidden'
                    // 添加底层遮罩
                    const maskDom = document.createElement('div')
                    maskDom.style.position = 'fixed'
                    maskDom.style.top = '0'
                    maskDom.style.width = '100%'
                    maskDom.style.height = '100%'
                    maskDom.style.zIndex = '99999990'
                    maskDom.style.backgroundColor = 'rgba(64,70,76, .8)'
                    bodyDom.appendChild(maskDom)

                    // 顶部关闭区域
                    const maskCloseDom = document.createElement('div')
                    maskCloseDom.style.float = 'right'
                    maskCloseDom.style.marginTop = '10px'
                    maskCloseDom.style.marginRight = '10px'
                    maskCloseDom.style.marginBottom = '20px'
                    maskCloseDom.style.width = '110px'
                    maskCloseDom.style.height = '40px'
                    maskCloseDom.style.lineHeight = '40px'
                    maskCloseDom.style.textAlign = 'center'
                    maskCloseDom.style.zIndex = '99999991'
                    maskCloseDom.innerText = '×'
                    maskCloseDom.style.fontSize = '26px'
                    maskCloseDom.style.color = '#fff'
                    maskCloseDom.style.cursor = 'pointer'
                    maskCloseDom.style.backgroundColor = 'rgba(50,55,59, .9)'
                    maskDom.appendChild(maskCloseDom)
                    maskCloseDom.onclick = function () {
                        onCloseDom(maskDom, bodyDom)
                    }

                    // 中间图片区域
                    const maskImgDivDom = document.createElement('div')
                    maskImgDivDom.style.position = 'relative'
                    maskImgDivDom.style.width = '80%'
                    maskImgDivDom.style.height = '85%'
                    maskImgDivDom.style.overflow = 'hidden'
                    maskImgDivDom.style.margin = '70px auto auto auto'
                    maskImgDivDom.style.zIndex = '99999991'
                    maskDom.appendChild(maskImgDivDom)

                    // 主区域图片
                    console.log(params)
                    const maskImgDom = document.createElement('img')
                    maskImgDom.style.position = 'absolute'
                    maskImgDom.style.top = '0'
                    maskImgDom.style.left = '0'
                    maskImgDom.style.right = '0'
                    maskImgDom.style.margin = 'auto'
                    if (params !== undefined && params.height !== undefined) {
                        maskImgDom.style.height = params.height
                    }
                    if (params !== undefined && params.width !== undefined) {
                        maskImgDom.style.width = params.width
                    }
                    maskImgDom.style.maxWidth = '100%'
                    maskImgDom.style.maxHeight = '100%'
                    maskImgDom.setAttribute('src', ev.srcElement.currentSrc)
                    maskImgDom.setAttribute('draggable', true)
                    maskImgDivDom.appendChild(maskImgDom)

                    // 拖拽事件
                    maskImgDivDom.onmousedown = function (e) {
                        onPositionImg(e, maskImgDivDom, maskImgDom)
                    }

                    // 鼠标上下滚动事件
                    let scrollFunc = function (e) {
                        let evt = e || window.event
                        if (evt.wheelDelta) { // 兼容处理
                            if (evt.wheelDelta > 0) { //当滑轮向上滚动时
                                onLargeImg (maskImgDom)
                            }
                            if (evt.wheelDelta < 0) { //当滑轮向下滚动时
                                onSmallImg(maskImgDom)
                            }
                        } else if (evt.detail) {  //Firefox滑轮事件
                            if (evt.detail > 0) { //当滑轮向上滚动时
                                onLargeImg (maskImgDom)
                            }
                            if (evt.detail < 0) { //当滑轮向下滚动时
                                onSmallImg(maskImgDom)
                            }
                        }
                    }
                    if (maskImgDivDom.addEventListener) {
                        maskImgDivDom.addEventListener('DOMMouseScroll', scrollFunc, { passive: false });
                    }
                    maskImgDivDom.onmousewheel = scrollFunc

                    // 底部操作区域
                    const maskOperationDom = document.createElement('div')
                    maskOperationDom.style.display = 'flex'
                    maskOperationDom.style.justifyContent = 'space-between'
                    maskOperationDom.style.width = '500px'
                    maskOperationDom.style.height = '40px'
                    maskOperationDom.style.lineHeight = '40px'
                    maskOperationDom.style.margin = '10px auto auto auto'
                    maskOperationDom.style.textAlign = 'center'
                    maskOperationDom.style.zIndex = '99999991'
                    maskDom.appendChild(maskOperationDom)

                    // 放大
                    const maskButtonLargeDom = document.createElement('div')
                    maskButtonLargeDom.style.boxSizing = 'border-box'
                    maskButtonLargeDom.style.padding = '0 40px'
                    maskButtonLargeDom.style.cursor = 'pointer'
                    maskButtonLargeDom.style.textAlign = 'center'
                    maskButtonLargeDom.innerText = '放大'
                    maskButtonLargeDom.style.color = '#fff'
                    maskButtonLargeDom.style.backgroundColor = 'rgba(50,55,59, .9)'
                    maskOperationDom.appendChild(maskButtonLargeDom)
                    maskButtonLargeDom.onclick = function () {
                        onLargeImg (maskImgDom)
                    }

                    // 缩小
                    const maskButtonSmallDom = document.createElement('div')
                    maskButtonSmallDom.style.boxSizing = 'border-box'
                    maskButtonSmallDom.style.padding = '0 40px'
                    maskButtonSmallDom.style.cursor = 'pointer'
                    maskButtonSmallDom.style.textAlign = 'center'
                    maskButtonSmallDom.innerText = '缩小'
                    maskButtonSmallDom.style.color = '#fff'
                    maskButtonSmallDom.style.backgroundColor = 'rgba(50,55,59, .9)'
                    maskOperationDom.appendChild(maskButtonSmallDom)
                    maskButtonSmallDom.onclick = function () {
                        onSmallImg(maskImgDom)
                    }

                    // 还原
                    const maskButtonReductionDom = document.createElement('div')
                    maskButtonReductionDom.style.boxSizing = 'border-box'
                    maskButtonReductionDom.style.padding = '0 40px'
                    maskButtonReductionDom.style.cursor = 'pointer'
                    maskButtonReductionDom.style.textAlign = 'center'
                    maskButtonReductionDom.innerText = '还原'
                    maskButtonReductionDom.style.color = '#fff'
                    maskButtonReductionDom.style.backgroundColor = 'rgba(50,55,59, .9)'
                    maskOperationDom.appendChild(maskButtonReductionDom)
                    maskButtonReductionDom.onclick = function () {
                        onReductionImg(maskImgDom)
                    }

                    // 旋转
                    const maskButtonRotateDom = document.createElement('div')
                    maskButtonRotateDom.style.boxSizing = 'border-box'
                    maskButtonRotateDom.style.padding = '0 40px'
                    maskButtonRotateDom.style.cursor = 'pointer'
                    maskButtonRotateDom.style.textAlign = 'center'
                    maskButtonRotateDom.innerText = '旋转'
                    maskButtonRotateDom.style.color = '#fff'
                    maskButtonRotateDom.style.backgroundColor = 'rgba(50,55,59, .9)'
                    maskOperationDom.appendChild(maskButtonRotateDom)
                    maskButtonRotateDom.onclick = function () {
                        onRotateImg(maskImgDom)
                    }
                }
            }
        }
    }
}



let scaleIndex = 1 // 放大的值
let rotateIndex = 0 // 旋转的值
let offsetX, offsetY // 拖动的值
let canMove = false // 是否可拖拽

// 放大
function onLargeImg (item) {
    scaleIndex += 0.2
    item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'
}

// 缩小
function onSmallImg (item) {
    if (scaleIndex > 0.3) {
        scaleIndex -= 0.2
        item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'
    }
}

// 还原
function onReductionImg (item) {
    scaleIndex = 1
    item.style.transform = 'scale('+scaleIndex+')'
    rotateIndex = 0
    item.style.transform = 'rotate('+rotateIndex+'deg)'
    offsetX = 0
    offsetY = 0
    canMove = false
    item.style.top = '0'
    item.style.left = '0'
    item.style.right = '0'
}

// 旋转
function onRotateImg (item) {
    rotateIndex += 90
    item.style.transform = 'rotate('+rotateIndex+'deg)' + 'scale('+scaleIndex+')'
}

// 关闭
function onCloseDom (item, bodyDom) {
    scaleIndex = 1
    rotateIndex = 0
    item.remove()
    bodyDom.style.overflow = ''
}

// 记录位置
function onPositionImg (e, itemDiv, itemImg) {
    let evt = e || event
    canMove = true
    offsetX = evt.clientX - itemImg.offsetLeft
    offsetY = evt.clientY - itemImg.offsetTop
    document.onmousemove = function (e) {
        onDragImg (e, itemImg)
    }
    document.onmouseup = function () {
        onDragCloseImg ()
    }
}

// 拖拽
function onDragImg (e, item) {
    let evt = e || event
    if (canMove === true) {
        evt.preventDefault()
        let left = evt.clientX - offsetX
        let top = evt.clientY - offsetY
        item.style.right = ''
        item.style.left = left + "px"
        item.style.top = top + "px"
    }
}

// 鼠标抬起关闭拖拽
function onDragCloseImg () {
    canMove = false
    document.onmousemove = null
}
gitee仓库：myphoto-layer: 轻量级图片查看器
博客：我的个人日志
效果图