BOM（二）：元素偏移量offset 、元素可视区client 、元素滚动 scroll、动画

news2024/11/25 22:37:09

PC端网页特效

- 元素偏移量offset
- 元素可视区client
- 元素滚动 scroll 系列
- 动画

元素偏移量offset

1.offset概述

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

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

2.offset常用属性

请添加图片描述

例如：

请添加图片描述

offset一定是以带定位的为准

3.offset和style的区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值

style

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

总结：获取元素大小位置，用offset更合适；给元素更改值，则需要用style改变。

元素可视区client

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

请添加图片描述

元素滚动 scroll 系列

scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
请添加图片描述

例如：

请添加图片描述

三个的主要区别

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

mouseenter 鼠标事件

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

动画

1.原理及步骤

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

实现步骤：

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

例如：

请添加图片描述
效果为盒子从左侧开始运动，运动到距离页面左侧800px位置时停止

动画效果移动要加上定位，不加上定位是无法开启动画的

2.动画函数

很多内容可能用到同样的动画，因此我们讲动画效果做封装，写成一个函数

格式：

function 动画名称（目标对象，目标位置，回调函数）
其中回调函数可以不写，回调函数一定是动画运行结束之后才会调用

    <div></div>
    <script>
        //动画封装,obj为目标对象，target为目标位置
        function animate(obj, target) {
            var begin = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(begin);//如果一定距离大于800px，则停止运动
                }
                obj.style.left = obj.offsetLeft + 5 + 'px';//位置赋值用style，位置获取用offset
            }, 30);
        }
        var div = document.querySelector('div');
        //调用函数
        animate(div, 900);
    </script>