1.如何实现放大镜效果
思维整理：
1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能
2.黄色的遮挡层跟随鼠标功能。
3.移动黄色遮挡层,大图片跟随移动功能。
html，css代码
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/放大镜.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.one {
position: relative;
margin-left: 100px;
margin-top: 100px;
width: 400px;
height: 500px;
border: 1xp solid black;
}
.one img {
width: 100%;
height: 100%;
}
.yel {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgb(252, 252, 112, .5);
cursor: crosshair;
}
.big {
display: none;
position: absolute;
margin-top: 100px;
margin-left: 100px;
width: 600px;
height: 600px;
top: 0;
left: 410px;
background-color: aqua;
border: 1px solid cornsilk;
overflow: hidden;
}
.big img {
width: 1000px;
height: 1000px;
}
.bigImg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="one">
<img src="../img/迪迦.jpg" alt="">
<!-- 添加遮挡层 -->
<div class="yel"></div>
<!-- 添加大盒子 -->
<div class="big"><img src="../img/迪迦.jpg" alt="" class="bigImg"></div>
</div>
</body>
<html>js代码
代码语言：js复制window.addEventListener('load', function () {
var one = this.document.querySelector('.one');
var yel = this.document.querySelector('.yel');
var big = this.document.querySelector('.big');
// 当鼠标经过就显示和隐藏遮罩层和大盒子
one.addEventListener('mouseover', function () {
yel.style.display = 'block';
big.style.display = 'block';
})
one.addEventListener('mouseout', function () {
yel.style.display = 'none';
big.style.display = 'none';
})
one.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 给黄色的遮挡层一个鼠标在盒子内移动的坐标
var yelX = x - yel.offsetWidth / 2
var yelY = y - yel.offsetHeight / 2
if (yelX <= 0) {
yelX = 0;
} else if (yelX >= one.offsetWidth - yel.offsetWidth) {
yelX = one.offsetWidth - yel.offsetWidth;
}
if (yelY <= 0) {
yelY = 0;
} else if (yelY >= one.offsetHeight - yel.offsetHeight) {
yelY = one.offsetHeight - yel.offsetHeight;
}
yel.style.left = yelX 'px';
yel.style.top = yelY 'px';
// 遮挡层移动距离=大图片最大移动距离/遮挡层的最大移动距离
// 1.求出遮挡层的最大移动距离
var yelMaxx = one.offsetWidth - yel.offsetWidth;
var yelMaxy = one.offsetHeight - yel.offsetHeight;
var bigImg = document.querySelector('.bigImg');
// 大图片的移动距离
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 利用上面公式 可以得到大图片移动距离的XY值
var bigX = yelX * bigMax / yelMaxx;
var bigY = yelY * bigMax / yelMaxy;
bigImg.style.left = -bigX 'px';
bigImg.style.top = -bigY 'px';
})
});
2.client系列属性
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、 内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包含padding，内容的高度，不含边框，返回值不带单位
3. scroll系列属性
scroll系列属性 作用
element.scrollTop 返回被卷去的，上侧距离,返回数值不带单位
element.scrolleft 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏 掉的高度,我们就称为预面被卷去的头部。滚动条在滚动时会触发onscroll事件。
4.固定侧边栏
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
margin: 10px auto;
width: 1000px;
height: 500px;
background-color: rgb(134, 225, 255);
}
.backTop {
background-color: deepskyblue;
}
.slider {
position: absolute;
top: 510px;
right: 200px;
float: right;
width: 70px;
height: 160px;
line-height: 160px;
}
.backTop {
display: none;
position: absolute;
bottom: 0;
}
.main-w {
height: 2000px;
}
</style>
</head>
<body>
<div class="slider">
<span class="backTop">返回顶部</span>
</div>
<div class="header-w">头部区域</div>
<div class="banner-w">banner区域</div>
<div class="main-w">主体区域</div>
<script>
var slider = document.querySelector('.slider');
var span = document.querySelector('.backTop');
var banner = document.querySelector('.banner-w');
var main = document.querySelector('.main-w');
var mainTops = main.offsetTop;
var bannerTops = banner.offsetTop;
// 侧边栏固定定位变化后的位置值
var sliderTops = slider.offsetTop - bannerTops;
// 被卷去头部的大小为bannerTops
console.log(bannerTops);
// 若页面被卷去的头部大于bannerTops的话就让侧边栏改为固定定位
document.addEventListener('scroll', function () {
var tops = window.pageYOffset;
if (tops >= bannerTops) {
slider.style.position = 'fixed';
slider.style.top = sliderTops 'px';
} else {
slider.style.position = 'absolute';
slider.style.top = "520px";
}
if (tops >= mainTops) {
span.style.display = "block";
} else {
span.style.display = "none";
}
})
</script>
</body>
</html>效果展示
这篇文章实现了三个功能，模态框，放大镜，以及固定侧边栏，这些功能是经常见的，也是基于js而实现的，如果能给你带来帮助那还请用发财的小手点个赞吧！
我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
