JavaScript学习笔记(二) PC端+移动端网页特效

思维导图

1. PC端网页特效

1.1 元素偏移量 offset 系列

1.1.1 offset 概述

• offset 就是偏移量， 使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
• 功能：
  ① 获得元素距离带有定位父元素的位置
  ② 获得元素自身的大小（宽度高度）
• 注意： 返回的数值都不带单位

1.1.2 常用属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包含padding，边框，内容区的宽度，返回值不带单位
element.offsetHeight	返回自身包含padding，边框，内容区的高度，返回值不带单位

案例：基本使用

<div class="father"> // css略了
	<div class="son"></div>
</div>
<div class="w"></div>
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值  
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准  如果没有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
console.log(w.offsetWidth);
console.log(w.offsetHeight);
</script>

案例：计算鼠标在盒子内的坐标

<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>

1.1.3 offset 与 style 区别

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
想要获取元素大小位置，用offset更合适	想要给元素更改值，则需要用style改变

1.2 元素可视区 client 系列

client 就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

1.2.1 常用属性

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding，内容区的高度，不含边框，返回数值不带单位

1.3 元素滚动 scroll 系列

scroll 就是滚动，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

1.3.1 常见属性

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

1.3.2 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

• 页面被卷去的头部：可以通过window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset
• 注意：元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset

页面被卷去的头部兼容性解决方案

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

function getScroll() {
    
	return {
   
	left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, 
	top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 
	};
} 
// 使用的时候
getScroll().left

补充：滚动窗口至文档中的特定位置。window.scroll(x, y)
注意，里面的x和y 不跟单位，直接写数字
页面滚动了多少，可以通过 window.pageYOffset 得到

1.4 三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包含padding，边框，内容区的宽度，返回值不带单位
element.clientWidth	返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

• 用法区分：
  ① offset系列 经常用于获得元素位置 offsetLeft offsetTop
  ② client 经常用于获取元素大小 clientWidth clientHeight
  ③ scroll 经常用于获取滚动距离 scrollTop scrollLeft
  ④ 注意页面滚动的距离通过 window.pageXOffset 获得

知识点补充：
mouseenter 和 mouseover的区别
当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是：
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发。因为mouseenter不会冒泡，常跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡

1.5 动画函数封装

1.5.1 动画实现原理

• 核心原理：通过定时器 setInterval() 不断移动盒子位置
• 实现步骤：
  ① 获得盒子当前位置
  ② 让盒子在当前位置加上1个移动距离
  ③ 利用定时器不断重复这个操作
  ④ 加一个结束定时器的条件
  ⑤ 注意此元素需要添加定位，才能使用element.style.left

<div></div>
<script>
	var div = document.querySelector('div');
	var timer = setInterval(function() {
     
		if (div.offsetLeft >= 400) {
     
			// 停止动画 本质是停止定时器
			clearInterval(timer);
		}
		div.style.left = div.offsetLeft + 1 + 'px';
	}, 30);
</script>

1.5.2 动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离。

<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>

1.5.3 动画函数给不同元素记录不同定时器

• 如果多个元素都使用这