PC端网页特效

最新推荐文章于 2023-02-20 12:36:42 发布

PumuMindu

最新推荐文章于 2023-02-20 12:36:42 发布

阅读量184

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46597384/article/details/118333038

版权

title: PC端网页特效
date: 2021-06-19 17:02:49
tags:

PC端网页特效

目标

能够说出常见offset系列属性的作用

能够说出常见client系列属性的作用

能够说出常见scroll系列属性的作用

能够封装简单动画函数

能够写出网页轮播图案例

1. 元素偏移量offset系列

1.1 offset 概述

offset 即偏移量，使用该属性可以动态的得到该元素的位置（偏移）、大小等。

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

offset系列属性

element.parentNode 返回最近的一级父亲，亲爸爸，不管父亲由有没有定位

1.2 offset 与 style 的区别

offset

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

style

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

静态框拖拽

弹出框，也成为模态框

点击弹出层，会弹出模态框，并且显示灰色半透明的遮档层。
点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
鼠标松开，可以停止模态框移动。

<script>
        // 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        // 2. 点击弹出层链接 link 让 mask 和 login 显示出来
        link.addEventListener('click',function() {
            mask.style.display = 'block';
            login.style.display = 'block';
        })
        // 3. 点击 closeBtn 就隐藏 mask 和 login
        closeBtn.addEventListener('click',function() {
            mask.style.display = 'none';
            login.style.display = 'none';
        })
        // 4.  开始拖拽
        // (1) 鼠标按下，获得鼠标在盒子内的坐标
        title.addEventListener('mousedown',function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的letf和top值
            document.addEventListener('mousemove',move)
            function move (e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup',function() {
                document.removeEventListener('mousemove',move);
            })
        })
    </script>

2. 元素可视区 client 系列

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

client 系列属性

立即执行函数(function() {}) () 或者 (function() {} ())

主要作用：创建一个独立的作用域。避免了命名冲突问题

下面三种情况都会刷新页面都会触发load事件。

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

但是火狐有一个特点：往返缓存，这个缓存不仅保存页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

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

3. 元素滚动 scroll 系列

3.1 元素 scroll 系列属性

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

scroll 系列属性

3.2 页面被卷去的头部

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

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

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

声明了DTD，使用 document.documentElement.scrollTop
未声明DTD，使用 document.body.scrollTop
新方法 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.scrollTeft || 0,
		}
}

使用的时候 getScroll().left

3.4 三大系列总结

三大系列大小对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEQ664IR-1624943493787)(PC%E7%AB%AF%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88_md_files%5CUntitled.png?v=1&type=image)]

它们的用法：

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

3.5 mouseenter 和 mouseover 的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发mouseenter事件
类似 mouseover，他们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

4. 动画函数封装

4.1 动画实现原理

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

实现步骤：

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

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

4.2 动画函数简单封装

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

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

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

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

代码优化：存在一个按钮，点击按钮才开始动画，会出现一个问题：当我们不断的见妞，这个元素会移动得越来越快，因为开启了多个定时器。

解决方案：让元素只执行一个定时器，先清除以前的定时器，只保留当时的定时器执行

<script>
        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');
        animate(div,400);
    </script>

4.4 缓动效果原理

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

思路：

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

匀速动画：盒子的位置+固定的值

缓动动画：盒子的位置+变化的值（(目标值 - 现在的位置) / 10）

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);

4.5 动画函数多个目标值之间移动

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

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

如果是正值，则步长向上取整
如果是负值，则步长向下取整

4.6 动画函数添加回调函数

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

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

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

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。

单独新建一个JS文件。
HTML文件引入JS文件。

5. 常见网页特效案例

5.1 节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续出发。

核心实现思路：利用回到函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量 var flag = ture;

if(flag) { flag = false; do something } 关闭水龙头

利用回调函数动画执行完毕，flag = ture 打开水龙头

PumuMindu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效

title: PC端网页特效date: 2021-06-19 17:02:49tags:PC端网页特效目标能够说出常见offset系列属性的作用能够说出常见client系列属性的作用能够说出常见scroll系列属性的作用能够封装简单动画函数能够写出网页轮播图案例1. 元素偏移量offset系列1.1 offset 概述offset 即偏移量，使用该属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都.
复制链接

扫一扫