PC 端网页特效总结（webAPI05 待续。。。）

hanjuyuan

已于 2022-06-05 17:38:07 修改

阅读量83

点赞数

分类专栏： webapi 文章标签： javascript

于 2021-06-10 17:34:05 首次发布

本文链接：https://blog.csdn.net/hanjuyuan/article/details/117784131

版权

webapi 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

PC 端网页特效

1.元素偏移量 offset 系列（重点把握）

1.1 offset 概述

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

1）获得元素距离带有定位父元素的位置

2）获得元素自身的大小（宽度高度）

3）注意：返回的数值都不带单位

offset 系列常用属性：

1）offsetparent:返回该元素带有定位的父级元素。如果没有就返回body。

2）offsetLeft：当前标签的左侧和其offsetParent（带定位的父元素！）的左侧之间的距离(两个标签左边框之间的距离)--同理父元素没有定位就参考body。

3）offsetTop：当前标签的上侧和其offsetParent（带定位的父元素！）的上侧之间的距离(两个标签上边框之间的距离)

4）元素.offsetWidth；元素.offsetHeight------包含标签的大小 width / height + padding + border
5）补充:console.log(son.parentNode); // 返回父亲是最近一级的父亲亲爸爸不管父亲有没有定位。

注意：以上皆为只读属性（只能获取不能设置）！！！---就是获得实时的位置，大小。

1.2 offset 与 style 区别

案例引入：获取鼠标在盒子内的坐标

分析：

a-b：就是鼠标在盒子的坐标！！！

// 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。

// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）

// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)

// 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标

代码展示：

<body>
    <div class="box"></div>
    <script>
        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>
</body>

案例：模态框拖拽---重要！！！

案例：仿京东放大镜---重要！！

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2.

2.元素可视区 client 系列（了解）

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

    // client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
        var div = document.querySelector('div');
        console.log(div.clientWidth);

案例：淘宝 flexible.js 源码分析（了解）

3.元素滚动 scroll 系列（重点把握）

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

代码展示：

<body>
    <div>
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滚动事件当我们滚动条发生变化会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);

        })
    </script>
</body>

案例：仿淘宝固定右侧侧边栏

4.三大系列总结

他们主要用法：

1.offset系列经常用于获得元素位置 offsetLeft offsetTop

2.client 经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得

5.mouseenter 和mouseover的区别

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

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

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。

mouseenter 只会经过自身盒子触发，之所以这样，就是因为mouseenter不会冒泡

跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

6.动画函数封装（未完待续。。。。。）

hanjuyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC 端网页特效总结（webAPI05 待续。。。）

PC 端网页特效1.元素偏移量 offset 系列1.1 offset 概述我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。1）获得元素距离带有定位父元素的位置 2）获得元素自身的大小（宽度高度）3）注意：返回的数值都不带单位offset 系列常用属性：1）offsetparent:返回该元素带有定位的父级元素。如果没有就返回body。2）offsetLeft：当前标签的左侧和其offsetParent（带定位的父元素！...
复制链接

扫一扫

专栏目录