放大镜
放大镜效果
思路：
1.其中得比例设置：放大镜的盒子的大小需要动态设置的，根据show盒子 show中mask遮罩层 和 放大镜的背景图来决定
show 放大镜的背景图
----- === ----------------
mask 放大镜盒子的宽度
mask盒子的大小/show盒子的大小 = 放大镜盒子的大小/放大镜背景图的大小
【1】创建对象(放大镜) class Enlarge{}
【2】描述对象
静态属性描述：
页面中存在的元素（需要做放大镜功能的容器）
动态方法描述：
init() 初始化，一般获取元素 绑定事件 创建
setStyle() 设置放大镜的宽高
move() 移动mask盒子，enlarge中的背景图也要跟着移动
changeImg() 点击小图片的时候切换show盒子和放大镜盒子的图片
【3】使用放大镜 new Enlarge(’.box’)
图片资源：（图片为某宝扒拉下来的）
https://pan.baidu.com/s/1B24aTTTkwi-2XTRsnSXtpg 提取码：7m8c
<!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>Document</title>
</head>
<body>
<div class="box">
<div class="show">
<img src="./images/img1_430x430.jpg" />
<div class="mask"></div>
</div>
<div class="list">
<p class="active">
<img
midelImg="./images/img1_430x430.jpg"
bigImg="./images/img1_750x1000.jpg"
src="./images/img1_60x60.jpg"
/>
</p>
<p>
<img
midelImg="./images/img2_430x430.jpg"
bigImg="./images/img2_750x1000.jpg"
src="./images/img2_60x60.jpg"
/>
</p>
<p>
<img
midelImg="./images/img3_430x430.jpg"
bigImg="./images/img3_750x1000.jpg"
src="./images/img3_60x60.jpg"
/>
</p>
<p>
<img
midelImg="./images/img4_430x430.jpg"
bigImg="./images/img4_750x1000.jpg"
src="./images/img4_60x60.jpg"
/>
</p>
<p>
<img
midelImg="./images/img5_430x430.jpg"
bigImg="./images/img5_750x1000.jpg"
src="./images/img5_60x60.jpg"
/>
</p>
</div>
<div class="enlarge"></div>
</div>
<script>
new Enlarge(".box");
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.box {
width: 450px;
margin: 50px;
display: flex;
flex-direction: column;
position: relative;
}
.box > .show {
width: 420px;
height: 430px;
border: 1px solid #333;
position: relative;
text-align: center;
}
.box > .show > img {
width: 100%;
height: 100%;
}
.box > .show > .mask {
width: 150px;
height: 150px;
background-color: yellow;
opacity: 0.4;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.box > .list {
width: 100%;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 20px;
}
.box > .list > p {
width: 60px;
height: 60px;
border: 2px solid #333;
margin-right: 10px;
text-align: center;
}
.box > .list > p.active {
border-color: red;
}
.box > .enlarge {
/* 容器 与背景图的比例为 1 ：2 */
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 450px;
background-size: 750px 1000px;
background-position: 0 0;
background-repeat: no-repeat;
border: 1px solid #ccc;
background-image: url(./images/img1_750x1000.jpg);
display: none;
}
class Enlarge {
constructor(ele) {
this.ele = document.querySelector(ele);
console.log(ele);
console.log(this.ele);
this.init();
}
init() {
// 获取需要用到的元素
this.show = this.ele.querySelector(".show");
this.showImg = this.show.querySelector("img");
this.mask = this.show.querySelector(".mask");
this.list = this.ele.querySelector(".list");
this.p = this.list.querySelectorAll("p");
this.enlarge = this.ele.querySelector(".enlarge");
// 给show盒子绑定鼠标移入事件
this.show.onmouseover = () => {
this.mask.style.display = "block";
this.enlarge.style.display = "block";
// 应该设置 放大镜的盒子的宽高
this.setStyle();
};
// 鼠标移出 show盒子的时候 隐藏 mask和enlarge
this.show.onmouseout = () => {
this.mask.style.display = "none";
this.enlarge.style.display = "none";
};
// 绑定show盒子中的移动事件
this.show.onmousemove = () => {
let e = window.event;
// 光标在show盒子上的坐标轴
// e.offsetX 得到是光标在mask盒子上的坐标轴
// let x = e.offsetX;
// let y = 0;
this.move(e);
};
this.p.forEach((item, index) => {
item.onclick = () => {
this.changeImg(item);
};
});
}
setStyle() {
// mask盒子的大小/show盒子的大小 = 放大镜盒子的大小/放大镜背景图的大小
// 放大镜大宽度 = 放大镜背景图的宽度 * mask盒子的宽度 / show盒子的宽度
// '750px 1000px' 拿到750 1000
let style = window.getComputedStyle(this.enlarge).backgroundSize;
let bgx = parseInt(style.split(" ")[0]);
let bgy = parseInt(style.split(" ")[1]);
let maskW = this.mask.offsetWidth;
let maskH = this.mask.offsetHeight;
let showW = this.show.offsetWidth;
let showH = this.show.offsetHeight;
let width = (bgx * maskW) / showW;
let height = (bgy * maskH) / showH;
this.enlarge.style.width = width + "px";
this.enlarge.style.height = height + "px";
}
move(e) {
let x = e.pageX - this.ele.offsetLeft - this.mask.offsetWidth / 2;
let y = e.pageY - this.ele.offsetTop - this.mask.offsetHeight / 2;
if (x <= 0) {
x = 0;
}
if (y <= 0) {
y = 0;
}
if (x >= this.show.offsetWidth - this.mask.offsetWidth) {
x = this.show.offsetWidth - this.mask.offsetWidth;
}
if (y >= this.show.offsetHeight - this.mask.offsetHeight) {
y = this.show.offsetHeight - this.mask.offsetHeight;
}
this.mask.style.left = x + "px";
this.mask.style.top = y + "px";
// mask盒子移动的距 / show 盒子的大小 == 背景图移动的距离 / 背景图的大小
// 背景图移动的距 = 背景图的大小 * mask盒子移动距离 / show盒子的大小
// 背景图移动的距离 写在 background-postion:x y
// background-postion 的取值 往左和往上移动 值为负数
let style = window.getComputedStyle(this.enlarge).backgroundSize;
let bgx = parseInt(style.split(" ")[0]);
let bgy = parseInt(style.split(" ")[1]);
let bpx = (bgx * x) / this.show.offsetWidth;
let bpy = (bgy * y) / this.show.offsetHeight;
// 设置background-position的属性
this.enlarge.style.backgroundPosition = `${-bpx}px ${-bpy}px`;
}
changeImg(ele) {
for (let i = 0; i < this.p.length; i++) {
this.p[i].classList.remove("active");
}
ele.classList.add("active");
let img = ele.querySelector("img");
// 更改show盒子中 img标签的图片路径
this.showImg.setAttribute("src", img.getAttribute("midelimg"));
// 更改放大镜的背景图
this.enlarge.style.backgroundImage = `url(${img.getAttribute("bigImg")})`;
}
}
le.classList.add("active");
let img = ele.querySelector("img");
// 更改show盒子中 img标签的图片路径
this.showImg.setAttribute("src", img.getAttribute("midelimg"));
// 更改放大镜的背景图
this.enlarge.style.backgroundImage = `url(${img.getAttribute("bigImg")})`;
}
}
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
