如何实现一张图片点击后全屏展示
使用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`
}