前置知识点
鼠标划入划出事件,鼠标移动事件
划入 onmouseover
划出 onmouseput
移动 onmousemove
获取元素左边距 高度的offersettop offsetwidth
<!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>
<style>
.middleBox {
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.middleBox img {
width: 400px;
height: 400px;
}
.shade {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
display: none;
}
.smallBox {
margin-top: 10px;
}
.smallBox img {
border: 1px solid #000;
margin-left: 5px;
width: 50px;
height: 50px;
}
.smallBox img.active {
border-color: red;
}
.box {
margin: 50px;
width: 402px;
position: relative;
}
.bigBox {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 105%;
display: none;
background-image: url(./images/big1.jpg);
background-position: 0 0;
background-size: 1600px 1600px;
background-repeat: no-repeat;
}
.shade:hover {
cursor: move;
}
</style>
</head>
<body>
<div class="box">
<div class="middleBox">
<img src="./images/big1.jpg" width="400" height="400" />
<div class="shade"></div>
</div>
<div class="smallBox">
<img class="active" src="./images/big1.jpg" />
<img src="./images/big2.jpg" alt="" />
</div>
<div class="bigBox"></div>
</div>
</body>
</html>
<script>
/*
实现思路
1、需要给小图 绑定点击事件 一旦点击 将中图给换掉
2、给中图绑定 鼠标划入、划出、移动事件
在移动的过程中计算遮住位置 最后将大图 背景做定位
// 整个的难点就是x表示的top的值。其次是offset表示的元素的magin加上父元素的margin等等。offwidht
// 表示的是元素的高度。top值是根据父元素的值来看的。
*/
// 1、获取常用的dom
const boxDom = document.querySelector(".box");
const middleBoxDom = document.querySelector(".middleBox");
const smallBoxDom = document.querySelector(".smallBox");
const bigBoxDom = document.querySelector(".bigBox");
const shadeDom = document.querySelector(".shade");
const middleImgDom = middleBoxDom.querySelector("img");
//2、小图绑定点击事件
smallBoxDom.addEventListener("click", (event) => {
// tagName与nodeName属性一样 都是获取到标签名称
if (event.target.tagName == "IMG") {
// 说明点击的是小图
// 将当前点击的小图 设置特殊的边框
smallBoxDom.querySelector(".active").className = "";
event.target.className = "active";
// 将中图进行修改
middleBoxDom.querySelector("img").src = event.target.src;
// 更换大图的背景 注意背景图片 最好加上单引号 避免地址特殊符号导致错误
bigBoxDom.style.backgroundImage = `url('${event.target.src}')`;
}
});
// 中图设置鼠标滑入事件
// 鼠标划入和鼠标移动在这里需要一起用。
middleBoxDom.onmouseover = function () {
// 将遮住显示
shadeDom.style.display = "block";
// 显示出大图
bigBoxDom.style.display = "block";
// 获取遮住的本身的宽高一半
let shadeWdithHalf = shadeDom.clientWidth / 2;
let shadeHeightHalf = shadeDom.clientHeight / 2;
const middleWidth = middleBoxDom.offsetWidth;
const shadeWidth = shadeDom.offsetWidth;
const middleHeight = middleBoxDom.offsetHeight;
const shadeHeight = shadeDom.offsetHeight;
// 中图绑定鼠标移动事件
middleBoxDom.onmousemove = function (event) {
// offsetX offsetY 是以当前元素左上角计算坐标 在移动的过程中 每次都会移动遮罩的位置,导致每次取出的xy 是有可能是错误的
// 为了保证坐标点事正确的 可以使用pageX pageY 经过运算得到
// let x = event.pageX;
// let y = event.pageY;
// page表示到鼠标移动的距离
// offsetLeft表示外边距的距离
// 表示红色框宽度的一般
let x = event.pageX - boxDom.offsetLeft - shadeWdithHalf;
let y = event.pageY - boxDom.offsetTop - shadeHeightHalf;
console.log(y);
if (x < 0) {
x = 0;
// 表示top值小于0的时候。top为这个
}
// console.log(middleWidth, shadeWidth);
if (x > middleWidth - shadeWidth) {
x = middleWidth - shadeWidth;
}
if (y < 0) {
y = 0;
}
if (y > middleHeight - shadeHeight) {
y = middleHeight - shadeHeight;
}
// console.log(boxDom.offsetLeft);
// 限制遮住的位置 不能超出整个容器
// if (x < boxDom.offsetLeft + shadeWdithHalf) {
// x = boxDom.offsetLeft + shadeWdithHalf;
// }
// if (x > boxDom.offsetLeft + middleBoxDom.clientWidth - shadeWdithHalf) {
// x = boxDom.offsetLeft + middleBoxDom.clientWidth - shadeWdithHalf;
// }
// if (y < boxDom.offsetTop + shadeHeightHalf) {
// y = boxDom.offsetTop + shadeHeightHalf;
// }
// if (y > boxDom.offsetTop + middleBoxDom.clientHeight - shadeHeightHalf) {
// y = boxDom.offsetTop + middleBoxDom.clientHeight - shadeHeightHalf;
// }
// 取出整个盒子距离上面与左侧的距离
// offsetLeft/offsetTop 表示获取上级定位元素的偏移量 因为以整个页面计算额坐标点 所以需要减掉 上面与左侧的距离才是相对 中图的坐标点
shadeDom.style.left = x + "px";
shadeDom.style.top = y + "px";
// 偏移量,这里表示偏移的值,前面为分子,后边为分母
let xPercentage = shadeDom.offsetLeft / middleImgDom.offsetWidth;
let yPercentage = shadeDom.offsetTop / middleBoxDom.offsetHeight;
// 获取这个的值
let size = window.getComputedStyle(bigBoxDom).backgroundSize.split(" ");
console.log(size);
let xMove = parseInt(size[0]) * xPercentage;
// 这里是取整操作。
let yMove = parseInt(size[1]) * yPercentage;
bigBoxDom.style.backgroundPosition = `-${xMove}px -${yMove}px`;
// console.log(xPercentage);
// shadeDom.style.top = y - boxDom.offsetTop - shadeHeightHalf + "px";
};
};
middleBoxDom.onmouseout = function () {
middleBoxDom.onmousemove = null;
// 将遮住显示
shadeDom.style.display = "none";
// 显示出大图
bigBoxDom.style.display = "none";
};
//
</script>