![](https://i-blog.csdnimg.cn/blog_migrate/187d1404f71e0f6f6d40a9d4a62dbcb3.png)
html:
<div class="xq_goodll">
<div class="xq_goodlltop">
<!-- 遮罩层,(遮1),宽高300 -->
<div class="jjj"></div>
<!-- 宽高400 -->
<img src="upload/s3.png" class="fdj" alt="">
<!-- 图片框,宽高500 -->
<!-- 大图片宽高800 -->
<div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div>
</div>
<div class="xq_goodllbot">
<ul>
<li></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt="" class="li_red"></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li></li>
</ul>
</div>
</div>
css:
.xq_good .xq_goodlltop{
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.xq_goodlltop .jjj{
width: 300px;
height: 300px;
position: absolute;
background-color: #FEDE4F;
opacity: .5;
cursor:move;
display: none;
}
.xq_goodlltop .big{
position: absolute;
width: 500px;
height: 500px;
top: -1px;
left:410px;
z-index:999;
display: none;
overflow: hidden;
border: #ccc 1px solid;
}
.xq_goodlltop .bigImg {
position: absolute;
}
js:
let xq_goodlltop = document.querySelector('.xq_goodlltop')
/* 放大镜开始*/
let fdj = document.querySelector('.fdj')
let jjj = document.getElementsByClassName('jjj')[0];
let big = document.querySelector('.big')
xq_goodlltop.addEventListener('mouseover', function () {
big.style.display = 'block';
jjj.style.display = 'block';
})
xq_goodlltop.addEventListener('mouseout', function () {
big.style.display = 'none';
jjj.style.display = 'none';
})
xq_goodlltop.addEventListener('mousemove', function (event) {
let x = event.pageX - this.offsetLeft;
let y = event.pageY - this.offsetTop;
/* 减去盒子高度的一半 -150 */
/* 把 jjj的距离父亲的偏移量提取出来 */
let jjjLeft = x - jjj.offsetWidth / 2;
let jjjTop = y - jjj.offsetHeight / 2;
/* jjj可偏移的最大 left 和 top */
let MaxLeft = xq_goodlltop.offsetWidth - jjj.offsetWidth
let MaxTop = xq_goodlltop.offsetHeight - jjj.offsetHeight
//如果jjjLeft <0 ;就让他停在0的位置
if (jjjLeft <= 0) {
jjjLeft = 0;
} else if (jjjLeft >= MaxLeft) {
jjjLeft = MaxLeft
}
// 如果jjjTop<0;让他停在0的位置
if (jjjTop <= 0) {
jjjTop = 0;
} else if (jjjTop >= MaxTop) {
jjjTop = MaxTop
}
jjj.style.left = jjjLeft + 'px'
jjj.style.top = jjjTop + 'px';
let bigImg = document.querySelector('.bigImg')
/* 图二可移动最大 注意不要减反*/
let bigImgMax = bigImg.offsetWidth - big.offsetWidth;
/* bigImg移动距离=如下 */
//大图移动距离 = 遮1左偏移量 * 大图可移动最大 / 遮1可移动最大
/* 遮1左偏移量: jjjLeft*/
/* 大图可移动最大:bigImgMax*/
/* 遮1可移动最大: MaxLeft*/
let bigImgLeft = jjjLeft * bigImgMax / MaxLeft
let bigImgTop = jjjTop * bigImgMax / MaxTop
bigImg.style.left = - bigImgLeft + 'px'
bigImg.style.top = - bigImgTop + 'px'
/* 加负号是因为加了相对定位,应向负移动 */
})
/* 放大镜结束 */
/* 右侧商品介绍栏切换 */
let flooerrr1 = document.getElementsByClassName('flooer_rr1')[0]
let flooertab = flooerrr1.getElementsByTagName('li')
let flooertab2 = document.getElementsByClassName('flooer_rrtab')
for (let i = 0; i < flooertab.length; i++) {
flooertab[i].onclick = function () {
/*1.上方tab栏切换 */
for (let j = 0; j < flooertab.length; j++) {
flooertab[j].classList.remove('rrnav_red')
}
this.classList.add('rrnav_red')
/*2.下方介绍栏切换 */
for (let q = 0; q < flooertab2.length; q++) {
flooertab2[q].style.display = 'none'
}
flooertab2[i].style.display = 'block'
}
}
/* 左侧tab切换 */
let flooer_lltop = document.getElementsByClassName('flooer_lltop')[0]
let flooerll_li = flooer_lltop.getElementsByTagName('li')
let flooer_llbot = document.getElementsByClassName('flooer_llbot')
for (let i = 0; i < flooerll_li.length; i++) {
flooerll_li[i].addEventListener('click', function () {
for (let j = 0; j < flooerll_li.length; j++) {
flooerll_li[j].classList.remove('rrnav_red')
//设置其他的为none
for (let g = 0; g < flooer_llbot.length; g++) {
flooer_llbot[g].style.display = 'none'
}
}
flooerll_li[i].classList.add('rrnav_red')
flooer_llbot[i].style.display = 'block'
})
}