第九天 PC端网页特效(轮播图制作)

目录

1.元素偏移量 offset

1.1 offset 概述

1.2 offset 和 style 的区别

1.3案例

1.获取鼠标在盒子内的坐标

 2.模仿京东图片放大镜的效果

2.元素可视区 client 系列

2.1 client

2.2 立即执行函数的两种创建方式以及作用

2.3 淘宝 flexible.js 分析 

3.元素滚动 scroll 系列

3.1元素 scroll 系列属性

3.2页面被卷去的头部

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

4. 三大系列的总结

5.mouseenter 和mouseover的区别

6.动画函数封装

6.1动画实现原理

6.2 动画函数简单封装

6.3 缓动动画的原理

6.4 多个目标值移动

6.5 动画函数添加回调函数

6.6动画函数封装到单独JS文件里面

7.节流阀

---

1.元素偏移量 offset

 

1.1 offset 概述

offsetWidth、offsetHeight 是包含边框，padding的

1.2 offset 和 style 的区别

 获取用 offset，改变用 style

1.3案例

1.获取鼠标在盒子内的坐标

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

 2.模仿京东图片放大镜的效果

2.元素可视区 client 系列

2.1 client

client 也可也获取元素的宽度和高度，但是这个宽度是不包含边框的

2.2 立即执行函数的两种创建方式以及作用

2.3 淘宝 flexible.js 分析 

3.元素滚动 scroll 系列

3.1元素 scroll 系列属性

3.2页面被卷去的头部

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

实际现在不考虑兼容性的问题了

注意整个页面的滚动距离和元素的滚动距离不同，整个页面的滚动距离是用window.pageYOffset

4. 三大系列的总结

5.mouseenter 和mouseover的区别

mouseover 经过自身盒子响应一次，经过盒子里的子元素又响应一次

而mouseenter只会响应经过自身或者子元素盒子一次。

6.动画函数封装

6.1动画实现原理

6.2 动画函数简单封装

如果很多元素都要使用动画效果，这时候就要把函数封装起来，方便调用

把定时器写写成对象的一个属性是为了更好地区分

6.3 缓动动画的原理

相比匀速，匀速每次加的是个固定值，而缓慢要加一个变化的值

6.4 多个目标值移动

ceil向上取整，floor向下取整 

6.5 动画函数添加回调函数

回调函数要写在定时器结束的位置

6.6动画函数封装到单独JS文件里面

 

7.节流阀