1.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜</title>
<link rel="stylesheet" href="./css/glass.css">
</head>
<body>
<div id='galss1' class="container">
<div class="g-left-wrap">
<div class="m-show-box">
<img src="./image/show_1.jpg" alt="正常图1">
<div class="m-mask"></div>
</div>
<ul class="m-choose-box">
<li><img src="./image/small_1.jpg" alt="1"></li>
<li><img src="./image/small_2.jpg" alt="2"></li>
<li><img src="./image/small_3.jpg" alt="3"></li>
<li><img src="./image/small_4.jpg" alt="4"></li>
</ul>
</div>
<!-- 右边放大区域 -->
<div class="g-right-wrap">
<img src="./image/big_1.jpg" alt="背景图1">
</div>
</div>
<script src="./js/index.js"></script>
<script>
let glass1 = new Glass('#galss1')
glass1.glassMousemove()
glass1.glassScale()
glass1.glassSwitch()
</script>
</body>
</html>2.css部分
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.container {
width: 1200px;
margin: 100px auto;
display: flex;
}
.container .m-show-box {
position: relative;
width: 350px;
height: 350px;
}
.container .m-mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgba(231, 211, 107, 0.5);
pointer-events: none;
}
.container .m-choose-box {
display: flex;
justify-content: space-between;
}
.container .g-right-wrap {
position: relative;
width: 400px;
height: 400px;
margin-left: 40px;
border: 1px solid darkblue;
overflow: hidden;
}
.container .g-right-wrap>img {
position: absolute;
}
3.js部分
class Glass {
constructor(id) {
this.glassRoot = document.querySelector(id) //放大镜根节点
this.mask = this.glassRoot.querySelector('.m-mask') //遮罩层
this.showBox = this.glassRoot.querySelector('.m-show-box') //显示show区域
this.glassBox = this.glassRoot.querySelector('.g-right-wrap') //放大镜区域
this.bgImg = this.glassRoot.querySelector('.g-right-wrap>img') //背景图片
this.chooseBox = this.glassRoot.querySelectorAll('.m-choose-box>li') //小图片
this.showBig = this.glassRoot.querySelector('.m-show-box>img')
}
/**
* 计算放大镜比较
* mask galssBox
* ------- = --------
* showbox bgImg ?
*
* bgImg = glassBox*showbox/mask
*
* 获取大图片与小图片的等比宽高
*/
glassScale() {
//遮罩层的宽.高
let masxWidth = parseInt(window.getComputedStyle(this.mask).width)
let masxHeight = parseInt(window.getComputedStyle(this.mask).height)
console.log('遮罩层的宽 :', masxWidth, '遮罩层的高 :', masxHeight);
//显示show区域宽.高
let showBoxWidth = parseInt(window.getComputedStyle(this.showBox).width)
let showBoxHeight = parseInt(window.getComputedStyle(this.showBox).height)
console.log('显示show区域宽 :', showBoxWidth, '显示show区域高 :', showBoxHeight);
//放大镜区域的宽.高
let glassBoxWidth = parseInt(window.getComputedStyle(this.glassBox).width)
let glassBoxHeight = parseInt(window.getComputedStyle(this.glassBox).height)
console.log('放大镜区域的宽 :', glassBoxWidth, '放大镜区域的高 :', glassBoxHeight);
//计算背景图缩放比例
let bgImgWidth = glassBoxWidth * showBoxWidth / masxWidth
let bgImgHeight = glassBoxHeight * showBoxHeight / masxHeight
console.log('背景图片的宽 :', bgImgWidth, '背景图片的高 :', bgImgHeight);
//将缩放比例赋值给背景图片
this.bgImg.style.width = bgImgWidth + 'px'
this.bgImg.style.height = bgImgHeight + 'px'
}
glassMousemove() {
let _this = this
/**
* 设置鼠标移入显示，移出隐藏
*/
//移入显示
this.showBox.addEventListener('mouseover', () => {
this.mask.style.display = 'block'
})
//移出隐藏
this.showBox.addEventListener('mouseout', () => {
_this.mask.style.display = 'none'
})
//鼠标移动
this.showBox.onmousemove = function (e) {
e = e || window.event
/**
* 获取光标的位置
*/
let x = e.offsetX - _this.mask.offsetWidth / 2
let y = e.offsetY - _this.mask.offsetHeight / 2
// console.log(x, y);
/**
* 设置光标界限
*/
if (x < 0) {
x = 0
}
if (x > _this.showBox.offsetWidth - _this.mask.offsetWidth) {
x = _this.showBox.offsetWidth - _this.mask.offsetWidth
}
if (y < 0) {
y = 0
}
if (y > _this.showBox.offsetHeight - _this.mask.offsetHeight) {
y = _this.showBox.offsetHeight - _this.mask.offsetHeight
}
/**
* 获取遮罩层的绝对定位位置
*/
_this.mask.style.top = y + 'px'
_this.mask.style.left = x + 'px'
/*
放大图片移动
mask maskmove
---- = -----------
glassbox bgmove
bgmove = maskmove*glassbox/mask
*/
//遮罩层的宽.高
let masxWidth = parseInt(window.getComputedStyle(_this.mask).width)
let masxHeight = parseInt(window.getComputedStyle(_this.mask).height)
// console.log('遮罩层的宽 :', masxWidth, '遮罩层的高 :', masxHeight);
//放大镜区域的宽.高
let glassBoxWidth = parseInt(window.getComputedStyle(_this.glassBox).width)
let glassBoxHeight = parseInt(window.getComputedStyle(_this.glassBox).height)
// console.log('放大镜区域的宽 :', glassBoxWidth, '放大镜区域的高 :', glassBoxHeight);
//获取移动
let bgImgMovey = y * glassBoxHeight / masxHeight
let bgImgMovex = x * glassBoxWidth / masxWidth
//将移动值赋给大图
_this.bgImg.style.top = `${ -bgImgMovey}px`
_this.bgImg.style.left = `${ -bgImgMovex}px`
}
}
glassSwitch() {
let _this = this
for (let i = 0; i < this.chooseBox.length; i++) {
this.chooseBox[i].onclick = function () {
_this.glassRemove()
this.classList.add('active')
_this.showBig.src = `image/show_${i+1}.jpg`
_this.bgImg.src = `image/big_${i+1}.jpg`
}
}
}
glassRemove() {
for (let i = 0; i < this.chooseBox.length; i++) {
this.chooseBox[i].classList.remove('active')
}
}
}