商城項目中，有鼠標移入圖片放大的功能，研究一下實現

Image zoom

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

#image {

width: 300px;

height: 300px;

background-color: #000;

background-image: url(https://placekitten.com/900/900);

background-size: 300px 300px;

background-repeat: no-repeat;

}

#image[zoomed] {

background-size: 900px 900px;

background-position: calc(var(--x) * 100%) calc(var(--y) * 100%);

}

let el = document.querySelector('#image')

// PC端操作

el.addEventListener('mouseenter', enterHandler)

el.addEventListener('mousemove', moveHandler)

el.addEventListener('mouseleave', leaveHandler)

// 移動端操作

el.addEventListener('touchstart', enterHandler)

el.addEventListener('touchmove', moveHandler)

el.addEventListener('touchend', leaveHandler)

function enterHandler(e) {

e.target.setAttribute('zoomed', 1)

moveHandler(e)

}

function moveHandler(e) {

// getBoundingClientRect用于獲取元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性

let rect = e.target.getBoundingClientRect()

let offsetX, offsetY

let isH5 = ['touchstart', 'touchmove', 'touchend'].includes(e.type)

// 是移動端，并且touches事件存在

if (isH5 && e.touches[0]) {

offsetX = e.touches[0].pageX - rect.left

offsetY = e.touches[0].pageY - rect.top

e.preventDefault()

} else {

// PC端

offsetX = e.offsetX

offsetY = e.offsetY

}

// 元素的位置信息

let x = offsetX / rect.width

let y = offsetY / rect.height

// 設置元素屬性，用于計算background-position的位置

e.target.style.setProperty('--x', x)

e.target.style.setProperty('--y', y)

}

function leaveHandler(e) {

e.target.removeAttribute('zoomed')

moveHandler(e)

}

具體效果復制下去打開看看

總結

以上是生活随笔為你收集整理的php 鼠标点击图片放大,鼠标移入放大图片预览效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。