效果
- 可以进行图片切换
- 图片有放大镜效果,且可以随着鼠标移动可以看到图片的不同部位
- 鼠标移动到放大图上图片不会消失
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/product.css">
</head>
<body>
<div class="xtx-wrapper">
<div class="container">
<!-- 面包屑 -->
<div class="xtx-bread">
<a href="javascript:;"> 首页 > </a>
<a href="javascript:;"> 电子产品 > </a>
<a href="javascript:;"> 电视 > </a>
<span>小米电视4A 32英寸</span>
</div>
<!-- 商品信息 -->
<div class="xtx-product-info">
<div class="left">
<div class="pictrue">
<div class="middle">
<img src="./images/1.jpg" alt="">
<div class="layer"></div>
</div>
<div class="small">
<ul>
<li class="active"><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
</ul>
</div>
<div class="large"></div>
</div>
</div>
</div>
</div>
</div>
<script>
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') {
this.querySelector('.active').classList.toggle('active')
e.target.parentNode.classList.toggle('active')
middle.querySelector('img').src = e.target.src
large.style.backgroundImage = `url(${e.target.src})`
}
})
middle.addEventListener('mouseenter', show)
middle.addEventListener('mouseleave', hide)
let timerId = null
function show() {
clearInterval(timerId)
large.style.display = 'block'
}
function hide() {
timerId = setTimeout(function () {
large.style.display = 'none'
}, 200)
}
large.addEventListener('mouseenter', show)
large.addEventListener('mouseleave', hide)
const layer = document.querySelector('.layer')
middle.addEventListener('mouseenter', function () {
layer.style.display = 'block'
})
middle.addEventListener('mouseleave', function () {
layer.style.display = 'none'
})
middle.addEventListener('mousemove', function (e) {
let x = e.pageX - middle.getBoundingClientRect().left
let y = e.pageY - document.documentElement.scrollTop - middle.getBoundingClientRect().top
if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
let mx = 0, my = 0
if (x < 100) mx = 0
if (x >= 100 && x <= 300) mx = x - 100
if (x > 300) mx = 200
if (y < 100) my = 0
if (y >= 100 && y <= 300) my = y - 100
if (y > 300) my = 200
layer.style.left = mx + 'px'
layer.style.top = my + 'px'
large.style.backgroundPositionX = -2 * mx + 'px'
large.style.backgroundPositionY = -2 * my + 'px'
}
})
</script>
</body>
</html>