<!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>
/* CSS布局步骤 */
/* 1. 根据效果写成HTML结构 */
/* 2. 写页面初始化样式(清除所有标签的内外边距等) */
/* 3. 写具体盒子的样式(大盒子=>小盒子 , 上盒子=>下盒子 左盒子=> 右盒子 ) */
* {
margin: 0;
padding: 0;
}
img {
/* 去掉图片底部缝隙 */
vertical-align: bottom;
}
li {
/* 去掉列表项目符号 */
list-style: none;
}
/* 清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.box {
width: 1000px;
margin-top: 100px;
margin-left: 360px;
}
.box .box-left {
width: 450px;
height: 450px;
border: 2px solid #eeeeee;
position: relative;
}
.box .box-left .mask {
width: 300px;
height: 300px;
background: yellow;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
cursor: move;
/* 隐藏元素 */
display: none;
}
.box .box-left .small-box {
margin-top: 20px;
display: flex;
justify-content: space-evenly;
}
.box .box-left .small-box li img {
border: 2px solid transparent;
cursor: pointer;
}
.box .box-left .small-box li img.active {
border-color: #e4393c;
}
.box .box-right {
width: 540px;
height: 540px;
border: 2px solid #eeeeee;
float: left;
/* 溢出隐藏 */
overflow: hidden;
/* 隐藏元素 */
display: none;
position: relative;
}
.box .box-right .big-img {
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="box clearfix">
<!-- 左部分 -->
<div class="box-left fl">
<!-- 左上部分 -->
<div class="middle-box">
<!-- 中图 -->
<img src="./images/1_middle.jpg" class="middle-img" />
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
<!-- 左下部分 -->
<ul class="small-box">
<li><img src="./images/1_small.jpg" class="active" /></li>
<li><img src="./images/2_small.jpg" /></li>
<li><img src="./images/3_small.jpg" /></li>
<li><img src="./images/4_small.jpg" /></li>
<li><img src="./images/5_small.jpg" /></li>
<li><img src="./images/6_small.jpg" /></li>
</ul>
</div>
<!-- 右部分 -->
<div class="box-right fl">
<img src="./images/1_big.jpg" class="big-img" />
</div>
</div>
<script>
// 封装一个获取DOM对象的函数
function $(cssSeletor) {
var dom = document.querySelectorAll(cssSeletor);
if (dom.length === 0) {
return null;
}
if (dom.length === 1) {
return dom[0];
}
return dom;
}
// 获取相关DOM对象
var box = $(".box");
var middleBox = $(".middle-box");
var mask = $(".mask");
var boxRight = $(".box-right");
var bigImg = $(".big-img");
var middleImg = $(".middle-img");
var smallBox = $(".small-box");
// 目标
// 1. 鼠标移上.middle-box层的时候,显示.mask以及.box-right层
// 2. 鼠标移出.middle-box层的时候,隐藏.mask以及.box-right层
// 3. 遮罩层可以在.middle-box层中跟随鼠标移动,并且鼠标显示在遮罩层的中间, 遮罩层移动不能出出.middle-box层的边界
// 4. 遮罩层移动的时候, .box-right里面的.big-img大图也需要跟着反向移动
// 5. 切换图片功能
// 鼠标移上事件
middleBox.onmouseover = function () {
mask.style.display = "block";
boxRight.style.display = "block";
}
// 鼠标移出事件
middleBox.onmouseout = function () {
mask.style.display = "none";
boxRight.style.display = "none";
}
// 获取.box的左外边距和上外边距
var boxOffLeft = box.offsetLeft;
var boxOffTop = box.offsetTop;
// 鼠标移动事件
middleBox.onmousemove = function (e) {
// 获取.middle-box的宽度
var middleBoxW = middleBox.offsetWidth;
// 获取.middle-box的高度
var middleBoxH = middleBox.offsetHeight;
// 获取遮罩层的宽度
var maskW = mask.offsetWidth;
// 获取遮罩层的高度
var maskH = mask.offsetHeight;
// 获取鼠标在.middleBox盒子内的坐标位置 offsetX和offsetY可能会出现闪烁问题
// console.log(e.offsetX, e.offsetY);
// mask.style.top = e.offsetY + "px";
// mask.style.left = e.offsetX + "px";
// 获取鼠标在.middleBox盒子内的坐标位置
var maskX = e.pageX - boxOffLeft;
var maskY = e.pageY - boxOffTop;
// 鼠标移动到盒子的中间
maskX = maskX - maskW / 2;
maskY = maskY - maskH / 2;
// 遮罩层left最大值
var maskMaxLeft = middleBoxW - maskW;
// 遮罩层top最大值
var maskMaxTop = middleBoxH - maskH;
if (maskX < 0) { // 左边界
maskX = 0;
} else if (maskX > maskMaxLeft) { // 右边界
maskX = maskMaxLeft;
}
if (maskY < 0) { // 上边界
maskY = 0;
} else if (maskY > maskMaxTop) { // 下边界
maskY = maskMaxTop;
}
// 设置.mask的left样式属性
mask.style.left = maskX + "px";
// 设置.mask的top样式属性
mask.style.top = maskY + "px";
/*
遮罩层当前移动距离 大图片当前移动距离?
__________________ = ___________________
遮罩层最大移动距离 大图片最大移动距离
*/
// 大图片最大移动left值
var bigImgMaxLeft = bigImg.offsetWidth - boxRight.clientWidth;
// 大图片最大移动top值
var bigImgMaxTop = bigImg.offsetHeight - boxRight.clientHeight;
// 大图片当前移动left值
var bigX = (maskX * bigImgMaxLeft) / maskMaxLeft;
// 大图片当前移动top值
var bigY = (maskY * bigImgMaxTop) / maskMaxTop;
// 设置大图片的left值
bigImg.style.left = -bigX + "px";
// 设置大图片的top值
bigImg.style.top = -bigY + "px";
}
smallBox.onmouseover = function (e) {
if (e.target.nodeName === "IMG") {
console.log(e.target);
// 排他
for (var i = 0; i < smallBox.children.length; i++) {
smallBox.children[i].firstElementChild.classList.remove("active");
}
// 设置高亮
e.target.classList.add("active");
// 设置中图图片
middleImg.src = e.target.src.replace("small", "middle");
// 设置大图图片
bigImg.src = e.target.src.replace("small", "big");
}
}
</script>
</body>
</html>
javascript原生防京东放大镜
最新推荐文章于 2024-03-21 17:08:35 发布