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.节流阀

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

javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
【第五部分 | JS WebAPI】6：PC端网页特效与本地存储
目录 | 概述 | PC端网页特效之三大系列 1-1 elementObj . offsetXXX 属性 1-2 elementObj . style 和 offset 的区别 1-3 案例:获取鼠标 ...
JS PC端网页特效（一）
2022年7月27日周三学习记录博客学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...
Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2. 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理. 3. 图 ...
【重点案例】b站pink老师JavaScript的PC端网页特效案例代码——网页轮播图
目录代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...

第九天 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.节流阀

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

最新文章

热门文章