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/index.css">
</head>
<body>
<div class="container">
<div>
<div class="moveRange">
<div class="move"></div>
<ol class="topPic">
<li class="active"><img src="image/show_1.jpg" alt="图1"></li>
<li><img src="image/show_2.jpg" alt="图2"></li>
<li><img src="image/show_3.jpg" alt="图3"></li>
<li><img src="image/show_4.jpg" alt="图4"></li>
</ol>
</div>
<ul>
<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="bigBox">
<img src="image/show_1.jpg" alt="图1">
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
2.css文件
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
margin: 50px auto;
display: flex;
}
.container .moveRange {
position: relative;
}
.container .move {
width: 150px;
height: 150px;
background-color: rgba(177, 108, 233, 0.5);
position: absolute;
cursor: pointer;
/* 让光标事件不起作用,解决光标闪烁问题 */
pointer-events: none;
display: none;
}
.topPic {
width: 350px;
height: 350px;
border: 1px solid #000;
}
ol {
display: flex;
list-style: none;
}
ol li {
display: none;
}
ol img {
width: 100%;
height: 100%;
}
ul {
margin-top: 20px;
display: flex;
justify-content: space-evenly;
}
ul li {
width: 50px;
height: 50px;
list-style: none;
}
ul li img {
width: 100%;
height: 100%;
}
.active {
display: block;
}
.addBorder {
border: 2px solid rgb(120, 34, 233);
}
.container .bigBox {
border: 1px solid #000;
width: 350px;
height: 350px;
margin-left: 80px;
overflow: hidden;
position: relative;
}
.container .bigBox img {
position: absolute;
top: 0;
left: 0;
}
3.js文件
//获取节点
const moveEle = document.querySelector('.move')
const moveRangeEle = document.querySelector('.moveRange')
const bigBox = document.querySelector('.bigBox')
const bigPic = document.querySelector('.bigBox>img')
function mouseMove() {
//获取元素p的尺寸
moveRangeEle.onmousemove = function (e) {
//获取事件对象
e = e || window.event
//获取光标位置,并把p元素的光标点设置成中心
let x = e.offsetX - moveEle.offsetWidth / 2
let y = e.offsetY - moveEle.offsetHeight / 2
//边界判断
//左边界
if (x < 0) {
x = 0
}
//右边界
if (x > moveRangeEle.offsetWidth - moveEle.offsetWidth) {
x = moveRangeEle.offsetWidth - moveEle.offsetWidth
}
// 上边界
if (y < 0) {
y = 0
}
// 下边界
if (y > moveRangeEle.offsetHeight - moveEle.offsetHeight) {
y = moveRangeEle.offsetHeight - moveEle.offsetHeight
}
//获取移动的比例
/**
遮罩层移动距离 遮罩层
------------ = ------------
背景图片移动距离 放大镜
背景图片移动距离 = 遮罩层移动距离*放大镜/遮罩层
**/
let moveX = x * bigBox.offsetWidth / moveEle.offsetWidth
let moveY = y * bigBox.offsetHeight / moveEle.offsetHeight
moveEle.style.top = y + 'px'
moveEle.style.left = x + 'px'
bigPic.style.top = -moveY + 'px'
bigPic.style.left = -moveX + 'px'
}
//鼠标移入出现
moveRangeEle.onmouseover = function () {
moveEle.style.display = 'block'
//计算背景图比例
/*计算背景图比例
遮罩层mask 放大镜bigGlass
--------------- = ------------------
显示图片showbox 背景图bigPicBox
背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
*/
bigPic.style.width = bigBox.offsetWidth * moveRangeEle.offsetWidth / moveEle.offsetWidth + 'px'
bigPic.style.height = bigBox.offsetHeight * moveRangeEle.offsetHeight / moveEle.offsetHeight + 'px'
}
//鼠标移出隐藏
moveRangeEle.onmouseout = function () {
moveEle.style.display = 'none'
}
}
//构造函数
function changePic(olliEle, ulliEle) {
this.olliEle = olliEle
this.ulliEle = ulliEle
}
changePic.prototype.change = function () {
//遍历li
for (let i = 0; i < this.ulliEle.length; i++) {
//获取当前对象
let _this = this
//清除所有样式
this.ulliEle[i].onclick = function () {
_this.clear()
_this.olliEle[i].classList.add('active')
_this.ulliEle[i].classList.add('addBorder')
bigPic.setAttribute('src', `./image/show_${i+1}.jpg`)
}
}
}
changePic.prototype.clear = function () {
for (let i = 0; i < this.olliEle.length; i++) {
this.olliEle[i].classList.remove('active')
this.ulliEle[i].classList.remove('addBorder')
}
}
const olliEle = document.querySelectorAll('ol>li')
const ulliEle = document.querySelectorAll('ul>li')
let changeObj = new changePic(olliEle, ulliEle)
changeObj.change()
mouseMove()