- 💂 个人主页：Aic山鱼
-
个人社区：山鱼社区
- 💬 如果文章对你有帮助
- 欢迎关注、点赞、收藏(一键三连)和订阅专哦
目录
前言
1.offset系列属性
2.如何实现js模态框
3.如何实现放大镜效果
4.client系列属性
5. scroll系列属性
6.固定侧边栏
总结
前言这篇文章来实现一下js中的放大镜效果，以及如何实现模态框拖动效果 先来了解一下offset，client和scroll系列属性
1.offset系列属性使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
下面在代码中实现一下更为直观
Document
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
margin: 400px;
width: 200px;
height: 200px;
background-color: aquamarine;
}
.son {
position: absolute;
margin: 0 auto;
width: 100px;
height: 100px;
background-color: rgb(255, 171, 36);
}
.wh {
width: 200px;
height: 200px;
border: 10px solid rebeccapurple;
background-color: cadetblue;
padding: 20px;
}
var box = document.querySelector('.father');
var boxs = document.querySelector('.son');
var boxs1 = document.querySelector('.wh');
// 可以得到元素的偏移位置返回的不带单位的数值
console.log(box.offsetTop);
// 它以带有定位的父亲为准如果没有父亲或者父亲没有定位 则以body为准
console.log(boxs.offsetTop);
// 可以得到元素的大小宽度和高度是包含padding+border+width
console.log(boxs1.offsetWidth);
console.log(boxs1.offsetHeight);
offset 与style的区别
1.offset ●offset 可以得到任意样式表中的样式值 ●offset 系列获得的数值是没有单位的 ●offsetWidth 包含padding+ border + width ●offsetWidth 等属性是只读属性,只能获取不能赋值所以，我们想要获取元素大小位置,用offset更合适
2.style ●style 只能得到行内样式表中的样式值 ●style.width 获得的是带有单位的字符串 ●style.width 获得不包含padding和border的值 ●style.width 是可读写属性,可以获取也可以赋值所以,我们想要给元素更改值,则需要用style改变
如何获取鼠标在盒子内的坐标？
Document
.box {
width: 200px;
height: 200px;
margin-left: 30px;
background-color: blueviolet;
}
var box = document.querySelector('.box');
box.addEventListener('mousemove', function (e) {
// 获取鼠标在盒子内的位置
// console.log(e.pageX);
// console.log(e.pageY);
// 获取盒子外面的位置
// console.log(box.offsetLeft);
// console.log(box.offsetTop);
// 相减得到鼠标在盒子内的位置
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
box.innerHTML = 'x坐标为' + x + 'y坐标为' + y;
})
思维整理：
1.点击弹出层，模态框和遮挡层就会显示出来display:block; 2.点击关闭按钮，模态框和遮挡层就会隐藏起来display:none; 3.在页面中拖拽的原理:鼠标按下并且移动，之后松开鼠标 4.触发事件是鼠标按下mousedown, 鼠标移动mousemove鼠标松开mouseup 5.拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值， 这样模态框可以跟着鼠标走了 6.鼠标按下触发的事件源是最上面一行，就是id为title . 7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。 8.鼠标按下，我们要得到鼠标在盒子的坐标,鼠标移动，就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。
* {
padding: 0px;
margin: 0px;
}
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
点击，弹出登录框
登录会员
关闭
用户名：
登录密码：
登录会员
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function () {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function () {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
效果展示
3.如何实现放大镜效果
思维整理：
1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能
2.黄色的遮挡层跟随鼠标功能。
3.移动黄色遮挡层,大图片跟随移动功能。
html，css代码
Document
* {
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;
}
![]()
![]()
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 = one.offsetWidth - yel.offsetWidth) {
yelX = one.offsetWidth - yel.offsetWidth;
}
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';
})
});
4.client系列属性
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、 内容区的宽度，不含边框，返回数值不带单位element.clientHeight返回自身包含padding，内容的高度，不含边框，返回值不带单位 5. scroll系列属性 scroll系列属性作用element.scrollTop返回被卷去的，上侧距离,返回数值不带单位element.scrolleft返回被卷去的左侧距离，返回数值不带单位element.scrollWidth返回自身实际的宽度，不含边框,返回数值不带单位element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏 掉的高度,我们就称为预面被卷去的头部。滚动条在滚动时会触发onscroll事件。
6.固定侧边栏
Document
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;
}
返回顶部
头部区域
banner区域
主体区域
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";
}
})
效果展示
这篇文章实现了三个功能，模态框，放大镜，以及固定侧边栏，这些功能是经常见的，也是基于js而实现的，如果能给你带来帮助那还请用发财的小手点个赞吧！
点赞👍：您的赞赏是我前进的动力！ 收藏⭐：您的支持我是创作的源泉！ 评论✍：您的建议是我改进的良药！ 山鱼🦈社区:欢迎大家加 山鱼社区！
