如何实现图片全屏展示?

297 阅读1分钟

如何实现一张图片点击后全屏展示

使用transform
把图片的中心点移到屏幕中心,然后再放大

function full(dom){
    let rect = dom.getBoundingClientRect()
    let centerX = rect.left + rect.width/2
    let centerY = rect.top + rect.height/2
    let wWidth = window.innerWidth/2
    let wHeight = window.innerHeight/2
    let movX = wWidth - centerX
    let movY = wHeight -centerY
    let scale1 = window.innerWidth/rect.width
    let scale2 = window.innerHeight/rect.height
    let scale = Math.min(scale1,scale2)
    dom.style = `transform:translate3d(${movX}px,${movY}px,0) scale(${scale});transform-origin:50% 50%;transition:all 1s;z-index:999`
}