js 实现图片预览功能

234 阅读1分钟

点击图片自动挂载到body上,功能不多,简易方便实用.

     function prevImg(url) {
        let bodyDom = document.getElementsByTagName('body')[0];
        let divDom = document.createElement('div')
        divDom.style.position = "fixed"
        divDom.style.display = "flex"
        divDom.style.justifyContent = "center"
        divDom.style.alignItems = "center"
        divDom.style.top = "0"
        divDom.style.left = "0"
        divDom.style.width = "100%"
        divDom.style.height = "100%"
        divDom.style.zIndex = "1099"
        divDom.style.backgroundColor = "rgba(100,100,100, 0.6)"
        let imgDom =document.createElement('img')
        imgDom.src = url
        divDom.appendChild(imgDom)
        bodyDom.appendChild(divDom)
        divDom.addEventListener('click',function(){
            bodyDom.removeChild(divDom)
        })
    }