笔记
1.元素偏移量offset系列
1.1 offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)大小等。
-
获得元素距离带有定位父元素的位置
-
获得元素自身的大小(宽度高度)
-
注意:返回的数值都不带单位
offset系列常用属性:
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body |
element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding、边框、内容区的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括padding、边框、内容区的高度,返回数值不带单位 |
1.offsetParent和parentNode区别
console.log(son.offsetParent);//返回带有定位的父亲否则返回的是body
console.log(son.parentNode); //返回父亲 不管父亲有没有定位
2.offset与style区别
案例:计算鼠标在盒子里的坐标
①我们在盒子内点击,想要得到鼠标距离盒子左右的距离
②首先得到鼠标在页面中的坐标( e.pageX, e.pageY )
③其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
④用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标
⑤如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件mousemove
<!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>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 我们在盒子内点击, 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标( e.pageX, e.pageY)
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离, 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function (e) {
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(box.offsetLeft);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
});
</script>
</body>
</html>
案例:模态框拖拽
弹出框,我们也称为模态框。
1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。
2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
4.鼠标松开,可以停止拖动模态框移动。
分析:
①点击弹出层,模态框和遮挡层就会显示出来display:block;
②点击关闭按钮,模态框和遮挡层就会隐藏起来display:none;
③在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标
④触发事件是鼠标按下mousedown,鼠 标移动mousemove鼠标松开mouseup
⑤拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的Ieft和top值,这样模态框可以跟着鼠标走了
⑥鼠标按下触发的事件源是最上面一行,就是id为title
⑦鼠标的坐标减去鼠标在盒子内的坐标,才 是模态框真正的位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.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;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码:</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
// 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);
})
})
</script>
</body>
</html>
案例:京东放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
<script src="jquery-1.12.4.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
.preview_img {
/* background-color: pink; */
position: relative;
width: 398px;
height: 398px;
margin-left: 50px;
margin-top: 100px;
cursor: move;
}
.mask {
position: absolute;
top: 0;
left: 0;
display: none;
width: 300px;
height: 300px;
background-color: #fede4f;
opacity: 0.5;
}
.big {
display: none;
position: absolute;
left: 550px;
top: 0;
width: 500px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
}
.big .bigImg {
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<div class="preview_img">
<img src="imag/s3.png" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img class="bigImg" src="imag/big.jpg" alt="" />
</div>
</body>
<script>
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//1.当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
preview_img.addEventListener('mouseover', function () {
big.style.display = 'block';
mask.style.display = 'block';
});
preview_img.addEventListener('mouseout', function () {
big.style.display = 'none';
mask.style.display = 'none';
});
//2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
// (1). 由于mask有定位在先计算出鼠标在盒子内的坐标
preview_img.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
//(3)设置mask最大移动距离maskMax和最小距离(0)
//由于preview_img和mask都是正方形所以xy都是宽度
maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (x <= 0) {
x = 0;
} else if (x >= maskMax) {
x = maskMax;
}
if (y <= 0) {
y = 0;
} else if (y >= maskMax) {
y = maskMax;
}
//(2)把鼠标在盒子里的坐标给mask
mask.style.left = x + 'px';
mask.style.top = y + 'px';
//3.遮挡层移动距离/遮挡层最大移动距离=大图移动距离/大图移动最大距离
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
console.log(bigImg);
//大图移动的距离
var bigx = (bigMax * x) / maskMax;
var bigy = (bigMax * y) / maskMax;
bigImg.style.left = -bigx + 'px';
bigImg.style.top = -bigy + 'px';
});
</script>
</html>
2.元素可视区client系列
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 |
立即执行函数
1.(function(){})();//有参数(function(a,b){})(a,b);
2.(function(){}());//有参数(function(a,b){}(a,b))
创建一个独立的作用域
3.元素滚动scroll系列
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小滚动距离等。
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度(包含文字超出部分),不含边框,返回数值不带单位 |
element.scrollHeight | 返回自身实际的高度(包含文字超出部分),不含边框,返回数值不带单位 |
3.1页面被卷去头部兼容性解决方案
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
1.声明了DTD ,使用document.documentElement.scrollTop
2.未声明DTD ,使用document.body.scrollTop
3.新方法window.pageYOffset
和window.pageXOffset
, IE9开始支持
4.解决兼容问题
案例:仿淘宝固定右侧侧边栏回到顶部
1.原先侧边栏是绝对定位
2.当页面滚动到一定位置,侧边栏改为固定定位
3.页面继续滚动,会让返回顶部显示出来
分析:
①需要用到页面滚动事件scroll因为是页面滚动,所以事件源是document
②滚动到某个位置,就是判断页面被卷去的上部值。
③页面被卷去的头部:可以通过window.pageYOffset获得如果是 被卷去的左window.pageXOffset
④注意:元素被卷去的头部是element.scrollTop ,如果是页面被卷去的头部则是window.pageYOffset
<!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>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function () {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子,就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
// 3. 当我们点击了返回顶部模块,就让窗口滚动的页面的最上方
goBack.addEventListener('click', function () {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
// 动画函数
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 15);
}
</script>
</body>
</html>
三大系列总结
他们主要用法:
- offset系列 经常用于获得元素位置offsetleft offsetTop
- client 经常用于获取元素大小clientWidth clientHeight
- scroll 经常用于获取滚动距离scrollTop scrollLeft
- 注意页面滚动的距离通过window. pageOXffset
mouseover和mouseenter区别
- 当鼠标移动到元素上时就会触发mouseenter事件
- 类似mouseover ,它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发mouseenter 只会经过自身盒子触发
- 之所以这样,就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡