网页特效知识点笔记+案例（1）PC端

最新推荐文章于 2022-01-05 11:43:28 发布

jiangliuer20

最新推荐文章于 2022-01-05 11:43:28 发布

阅读量414

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/wickhamchen/article/details/106941005

版权

文章目录

使用 offset client scroll 完成制作 PC端的一些特效，仿京东放大镜、拖拽移动模态框、淘宝移动端布局flexible.js、淘宝右侧固定侧边栏、动画函数封装、网页轮播图、节流阀、返回顶部、筋斗云。

移动端网页特效、移动端轮播图返回顶部、移动端视频插件zy.media.js

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏移量，我们使用offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

offset 系列常用属性：

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

offset

1.2 offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding 和 border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，用style更合适

1.3 offset 小案例：移动拖拽模态框

模态框

案例分析：

在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的 left 和 top 的值，这样模态框就可以跟着鼠标走了
鼠标按下的触发事件源是最上面的一行。（触发事件源总不能是整个 login div叭）
鼠标相对文档页面的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置 (left top)
鼠标按下mouseup：我们要得到鼠标在盒子的坐标
鼠标移动mousemove，就让模态框的坐标设置为：鼠标相对文档页面的坐标减去鼠标在盒子内的坐标，注意移动事件是写到按下事件里面。
鼠标松开mousedown，就停止拖拽，就是可以让鼠标移动事件接触。

模态框

1.4 offset 小案例：仿京东放大镜

京东放大镜

案例分析：

整个案例可以分为三个功能模块
鼠标经过小图片盒子，黄色的遮挡层和大图片层显示，离开隐藏2个盒子功能
黄色的遮挡层跟随鼠标功能
移动黄色遮挡层，大图片跟随移动功能。

第3,4点具体细节

首先是获得鼠标在盒子的坐标。
之后把数值给遮挡层做为left 和 top 值。
此时用到鼠标移动事件，但是还是在小图片盒子内移动。
发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
遮挡层不能超出小图片盒子范围
如果小于零，就把坐标设置为 0
如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
遮挡层的最大移动距离：小图片盒子宽度减去遮挡层盒子宽度

大图片的移动距离可以根据公式
$\frac{遮挡层移动距离}{遮挡层最大移动距离}$ = $\frac{大图片移动距离}{大图片最大移动距离}$

完整代码：
仿京东放大镜

2. 元素可视区 client 系列

2.1 client 概述

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

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

client

2.2 淘宝 flexible.js 源码分析

完整代码
flexible.js

立即执行函数

之前使用的函数一般都是这种的function fn(){}fn();

(function(){})() 或者 (function(){}())

主要作用：不用为函数命名，创建一个独立的作用域，避免了命名冲突的问题

触发load 事件

a标签的超链接
F5 或者刷新按钮（或强制刷新）
前进后退按钮

load 事件在页面从浏览器缓存中读取时不触发。

pageshow

火狐浏览器有个特点，“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM 和 JavaScript的状态，事件上是将整个页面都保存在了内存里/
所以此时后退按钮不能刷新页面。

此时可以使用 pageshow 事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow 会在load 事件后触发，根据事件对象中的 persisted 来判断是否缓存中的页面触发的 pageshow 事件，

注意: 这个事件给 window添加。

3. 元素滚动 scroll 系列

3.1 scroll 概述

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

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

scroll

3.2 页面被卷去的头部

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

滚动条在滚动时会触发onscroll 事件。

3.3 淘宝侧边栏案例

案例分析

原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让返回顶部显示出来

重点

需要用到页面滚动事件 scroll ，因为页面是滚动的，所以事件源是document
滚动到某个位置，就是判断页面被卷上去的上部值
页面被卷去的头部：可以通过 window.pageYoffset 获得，如果被卷去的左侧 window.pageXoffset
注意，元素被卷去的头部是 element.scrollTop ,如果是页面被卷去的头部，则是 window.pageYoffset
其实这个值，可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让侧边栏盒子固定定位了

注意: window.pageYoffset 和 window.pageXoffset IE9以上才支持

完整代码：
仿淘宝右侧固定侧边栏

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

兼容性的处理了解就行。

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

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

声明 DTD，也就是在文档首行添加 <!DOCTYPE html>

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

4. offset client scroll 三大系列总结

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

他们主要用法：

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

5. mouseenter 和 mouseover 的区别

当鼠标移动到元素上时就会触发mouseenter 事件

类似 mouseover，它们两者之间的差别是

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
mouseenter 只会经过自身盒子触发。
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

亲自试一试：mouseenter 与 mouseover 的不同

6. 简单动画函数封装

6.1 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

获得盒子当前位置
让盒子在当前位置加上 1 个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用 element.style.left

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

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。


	//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);
}

6.3 缓动效果原理

缓动动画就是让元素的运动速度有所变化，最常见的是让速度慢慢停下来。

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法：（目标值 - 现在的位置） / 10 做为每次移动的距离的步长
停止的条件：让当前盒子位子等于目标位置就停止定时器
注意步长值要取整

6.4 动画函数多个值之间移动

可以让动画函数从800 移动到 500

当我们点击按钮时候，判断步长是正值还是负值

如果是正值，则步长往大了取整 Math.ceil()。
如果是负值，则步长向小了取整Math.floor()。

6.5 动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这给函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调

回调函数写的位置：定时器结束的位置。

6.6 动画JS animate.js

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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

7. 动画实现案例

jiangliuer20

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
网页特效知识点笔记+案例（1）PC端

使用 offset client scroll 完成制作 PC端的一些特效，仿京东放大镜、拖拽移动模态框、淘宝移动端布局flexible.js、淘宝右侧固定侧边栏、动画函数封装、网页轮播图、节流阀、返回顶部、筋斗云。
复制链接

扫一扫