JS进阶网页特效（pink老师笔记）
元素偏移量offset系列
offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）.大小等
- 获取元素距离带有定位父类的位置
- 获取元素自身的大小（宽，高）
- 返回的数值都不带单位
<style>
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
}
.son
{
width: 100px;
height: 100px;
background-color: purple;
margin-left: 45px;}
</style>
</head>
<body>
<div class="father" >
<div class="son"></div>
</div>
<script>
var son=document.querySelector('.son');
var father=document.querySelector('.father');
console.log(father.offsetTop);
console.log(father.offsetLeft);
//他以带有定位的父亲为准，如果没有父亲或父亲没有定位，以body为准
console.log(son.offsetLeft);
</script>
</body>
<style>
.w{
width: 200px;
height: 200px;
background-color:blue;
margin:0 auto 200px;
padding: 10px;
border: 15px solid red;
}
</style>
<body>
<div class="w"></div>
<script>
var w=document.querySelector('.w');
console.log(w.offsetWidth);
console.log(w.offsetHeight);
</script>
console.log(son.offsetParent);//返回带有定位的父亲，否则返回的是body
console.log(son.parentNode);//返回的是最近一级的父亲，不管有没有定位
parentNode返回的是最近一级的父亲，亲爸爸，不管父亲有没有定位
offsetParent返回带有定位的父亲，否则返回的是Body
offset与style区别
案例：获取鼠标在盒子内的坐标
- 我们在盒子内点击 想要得到鼠标距离盒子左右的距离
- 首先得到鼠标在页面中的距离（e.pageX,e.pageY）
- 其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop
- 用鼠标距离页面的坐标减去盒子在页面中的距离 得到鼠标在盒子内的坐标
- 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove
<style>
.box{
width: 300px;
height: 300px;
margin: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.addEventListener('click',function(e){
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
this.innerHTML='X的坐标是'+x+',y的坐标是'+y; })
</script>
</body>
<style>
*{
padding: 0px;
margin: 0px;
}
.father{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px;
}
</style>
<div class="father"></div>
var father = document.querySelector('.father')
father.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是'+x+'y坐标是'+y;
})
案例：模态框拖拽
点击登陆显示出登陆框，点击关闭，登陆框隐藏，鼠标按下移动登录框
案例分析
1.点击弹出层，模态框和遮挡层就会显示出来display:block
2.点击关闭按钮：模态框和遮挡层就会隐藏起来display:none
3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
4.触发事件是鼠标是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup
5.拖拽过程：鼠标移动过程中，获得最新的值就赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了
6.鼠标按下触发的事件源是最上面一行，就是id为title
7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置
8.鼠标按下，我们要得到鼠标在盒子里的坐标
9.鼠标移动，就让模态框的坐标设置为：鼠标盒子减去盒子坐标即可，注意移动事件写到按下事件里面
10.鼠标弹起：就停止拖拽，就是可以让鼠标移动事件解除
代码地址
案例：仿京东放大镜效果页面结构搭建
1.整个案例可以分为三个功能模块
2.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
3.黄色的遮挡层跟随鼠标功能
- 把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
- 首先是获得鼠标在盒子里的坐标
- 之后把数值给遮挡层作为Left和top值
- 此时用到鼠标移动事件，但是还是在小图片盒子内移动
- 发现，遮罩层位置不对，需要再减去盒子自身高度和宽度的一半
- 遮罩层不能超出小图片盒子范围
- 如果小于0，就把坐标设置为0
4.移动黄色遮挡层，大图片跟随移动功能
- 求大图片的移动距离公式
- 大图片移动距离公式=遮罩层移动距离*大图片最大移动距离/遮罩层最大移动距离
案例代码
注意一定要引入我们的js文件
注意大图片有了定位之后才可以移动
<script src="js"></script>
元素可视区client系列
client 翻译过来就是客户端，我们使用client系列的相关来获取元素可视区的相关信息
通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小
案例：淘宝flexible.js源码分析
立即执行函数：不需要调用，立马能够自己执行的函数
写法：
<script>
//1.(function() {})()
(function(a){
console.log(a);
})(1)
//第二个小括号可以看作调用函数
//2.(fuction(){}());
</script>
立即执行函数最大的作用是独立创造了一个作用域，里面的所有变量都是局部变量，不会有命名冲突的情况。
var docE1=document.documentElement//获取html的根元素
var dpr=window.devicePixelRatio;//dpr 物理像素比
元素Scoll系列属性
scroll 翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态得到该元素的大小，滚动距离等
scrollwidth也包换padding值，但是受到盒子里面内容的变化。是真正的内容的大小。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
overflow: auto;
}
</style>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
var div = document.querySelector('div');
console.log(div.scrollHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll',function(){
console.log(div.scrollTop);
})
// 页面被卷去的头部：可以通过window.pageYOffset获得
// 如果是被卷去的左侧 window.pageXOffset
案例：仿淘宝固定侧边栏
案例代码
三大系列总结
他们的主要用法：
- offset系列经常用于获取元素位置 offseLeft offsetTop
- client经常用于获取元素大小 clientWidth clientHeight
- scroll经常用于获取滚动距离 scrollTop scrollLeft
- 页面的滚动距离通过 window.pageXOffset获得
mouseenter和mouseover的区别
1.当鼠标移动到元素上时就会触发mouseenter事件
2.类似mouseover，它们两者之间的差别时
mouseover鼠标经过自身盒子就会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发。
3.因为mouseenter不会冒泡
动画原理
动画效果
<!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 {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 动画原理
// 1. 获得盒子当前位置
// 2. 让盒子在当前位置加上1个移动距离
// 3. 利用定时器不断重复这个操作
// 4. 加一个结束定时器的条件
// 5. 注意此元素需要添加定位， 才能使用element.style.left
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
</script>
</body>
</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>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<span>夏雨荷</span>
<script>
// 简单动画函数封装obj目标对象 target 目标位置
function animate(obj, target) {
var timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
// 调用函数
animate(div, 300);
animate(span, 200);
</script>
</body>
</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>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>点击夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>
// var obj = {};
// obj.name = 'andy';
// 简单动画函数封装obj目标对象 target 目标位置
// 给不同的元素指定了不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 调用函数
animate(div, 300);
btn.addEventListener('click', function() {
animate(span, 200);
})
</script>
</body>
</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>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>点击夏雨荷才走</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</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>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function() {
// 调用函数
animate(span, 800);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</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>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
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 - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
if (callback) {
// 调用函数
callback();
}
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function() {
// 调用函数
animate(span, 800, function() {
// alert('你好吗');
span.style.backgroundColor = 'red';
});
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</html>