原生放大图层（预览放大图片） demo

最新推荐文章于 2024-07-19 15:32:49 发布

小杨得努力

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量90

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_49670278/article/details/130886928

版权

<!DOCTYPE html>

<head>

<title>qc-detail</title>

</head>

<body>

</div>

<h1 class="logo"><a href="/">100% Focus On Original Jordan Series</a></h1>

</div>

</div>

</ul>

</div>

QC Pictures

</div>

<p>Order number：TS9544091</p>

<p>Member name：<span>Jlyn Gibson</span></p>

<p>Product name： <span>adidas Yeezy Slide Desert Sand FW6344</span></p>

</div>

<button type="button" class="btn1">Satisfied, Candeliver</button>

<button type="button" class="btn2">Not satisfied, Please retake QC</button>

</div>

const small = document.querySelector('.small')

const middle = document.querySelector('.middle')

const large = document.querySelector('.large')

// 切换图片

small.addEventListener('mouseover', function (e) {

if (e.target.tagName === 'IMG') {

small.querySelector('.active').classList.remove('active')

e.target.parentNode.classList.add('active')

middle.querySelector('img').src = e.target.src

large.style.backgroundImage = `url(${e.target.src})`

}

})

// 显示隐藏大图弹层

let timerId = null

const show = function () {

clearTimeout(timerId)

large.style.display = 'block'

}

const hide = function () {

clearTimeout(timerId)

timerId = setTimeout(function () {

large.style.display = 'none'

}, 200)

}

middle.addEventListener('mouseenter', show)

middle.addEventListener('mouseleave', hide)

large.addEventListener('mouseenter', show)

large.addEventListener('mouseleave', hide)

// 移动遮罩层和大图预览

const layer = middle.querySelector('.layer')

document.addEventListener('mousemove', function (e) {

// console.log(e,"源");

const position = middle.getBoundingClientRect()

console.log(middle.width, "213123213123123");

// console.log(position.left ,'wqewqewqe');

// console.log(position);

console.log(e.pageY, "e.pageYsfwetfsefsdfsd");

console.log(position.top, "wqeqeqwewr1111position.top");

const x = e.pageX - position.left, y = e.pageY - position.top - document.documentElement.scrollTop

// 获取当前图片的高

let img = document.getElementById("myImage");

let height = img.height;

// console.log(x,'1232321x');

// console.log(e.pageX,"312u3u921u92134u09e.pageX");

if (x >= 0 && x <= 500 && y >= 0 && y <= height) {

let mx = 0, my = 0;

if (x <= 100) mx = 0

if (x > 100 && x < 400) mx = x - 50

if (x >= 400) mx = 400

if (y <= 100) my = 0

if (y > 100 && y < height - 50) my = y - 50

if (y >= height - 50) my = height - 100

layer.style.left = mx + 'px'

layer.style.top = my + 'px'

large.style.backgroundPositionX = - 2 * mx + 'px'

large.style.backgroundPositionY = - 2 * my + 'px'

}

})

middle.addEventListener('mouseenter', function () {

layer.style.display = 'block'

})

middle.addEventListener('mouseleave', function () {

layer.style.display = 'none'

})

</script>

</body>

</html>

小杨得努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生放大图层（预览放大图片） demo

/ console.log(e,"源");-- 网站Logo -->-- 详细描述 -->-- 商品信息 -->-- 主导航 -->// 移动遮罩层和大图预览。// 获取当前图片的高。-- 项部导航 -->// 显示隐藏大图弹层。
复制链接

扫一扫