JavaScript 之 BOM对象（下）

最新推荐文章于 2024-04-26 16:47:03 发布

txq231254

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量912

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/txq231254/article/details/124504522

版权

一、offset、client、scroll三大家族介绍及案例

1. 元素偏移量 offset系列

1.1 offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、小等。
●获得元素距离带有定位父元素的位置
●获得元素自身的大小(宽度高度)
●注意:返回的数值都不带单位
offset系列常用属性:
offset系列属性作用
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回数值不带单位

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 获取鼠标在盒子里的坐标
①我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
②首先得到鼠标在页面中的坐标( e.pageX, e.pageY )
③其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
④用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标
⑤如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件mousemove

2. 元素可视区client系列

我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。
client宽度和我们offsetWidth最大的区别就是不包含边框

client系列属性作用
element.clientTop 返回元素上边框的大小

element.clientLeft 返回元素左边框的大小

element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

3.元素滚动scroll系列

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

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

4. 三大系列总结

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

5.拖拽模态框案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            margin: 0 auto;
            text-align: center;
        }
        
        .box {
            display: none;
            background-color: white;
            width: 500px;
            height: 200px;
            position: relative;
            margin: auto
        }
        
        .box p {
            font-size: 20px;
            text-align: center;
            padding-top: 10px
        }
        
        table {
            text-align: right;
        }
        
        input {
            width: 360px;
            height: 30px
        }
        
        button {
            width: 200px;
            height: 40px;
            background-color: white;
            border: 1px solid rgb(204, 195, 195);
            margin-left: 140px;
            margin-top: 10px
        }
        
        .yuan {
            border-radius: 40px 40px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top: -20px;
            left: 480px;
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>点击，弹出登录框</h1>
    <div class="box">
        <p class="load">登录会员</p>
        <form action="">
            <table>
                <tr>
                    <td>
                        用户名：
                    </td>
                    <td>
                        <input type="text" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>登录密码：</td>
                    <td> <input type="password" placeholder="请输入登录密码"></td>
                </tr>

            </table>

        </form>
        <button>登录会员</button>
        <!-- 按钮写在表单域里面的话，相当于提交表单，按下按钮，box盒子也会消失？？ -->
        <div class="yuan">关闭</div>
    </div>
    <script>
        //点击登录框，整个body颜色变灰
        var h1 = document.querySelector('h1')
        var body = document.body
        var box = document.querySelector('.box')
        var off = document.querySelector('.yuan')
        h1.addEventListener('click', function() {
                body.style.backgroundColor = 'grey'
                    // body.style.backgroun = ' rbga(0, 0, 0, 0.3)'
                    //点击登录框，弹出模态框
                box.style.display = 'block'
            })
            //点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层
        off.addEventListener('click', function() {
                box.style.display = 'none';
                body.style.backgroundColor = ''
            })
            //当鼠标当道模态框上面一行是，可以按住鼠标拖拽模态框在页面中移动            margin-left: 200px; margin-top: 200px 修改模态框相对于页面的位置
        var load = document.querySelector('.load')
        load.addEventListener('mouseover', function() {
            load.style.cursor = 'move';
            load.addEventListener('mousedown', function() {

                //怎么让盒子跟随鼠标移动
                load.addEventListener('mousemove', function(e) {
                    /* 后面JS设计的时候就只能实现x轴的移动 */
                    box.style.marginLeft = e.pageX - 250 + 'px'
                    box.style.marginTop = e.pageY - 100 + 'px'
                })

            })


        })
    </script>
</body>

</html>

二、缓动动画的原理和节流阀

1、动画实现原理

核心原理:通过定时器setInterval0不断移动盒子位置。
实现步骤:

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

2.动画函数简单封装

注意函数需要传递2个参数,动画对象和移动到的距离。
可以让页面多个元素调用实现动画效果
简单动画函数封装obj目标对象target目标位置

<div></div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        var span =document.querySelector('span');

        function fengz(obj, target) {
            var time = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    clearInterval(time);
                } else {
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 30)
        }
        fengz(div, 400);
        fengz(span, 200);
    </script>

3 .缓动效果原理

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

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

4 、节流阀

防止轮播图按钮连续点击造成播放过快。
节流阀目的:当上-个函数动画内容执行完毕，再去执行下一个函数动画,让事件无法连续触发。
核心实现思路:利用回调函数,添加个变量来控制,锁住函数和解锁函数。
开始设置-个变量var flag= true;
If （flag {flag = false do something}关闭水龙头
利用回调函数动画执行完毕, flag=true 打开水龙头

5. 缓慢动画简单案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缓慢动画</title>
    <style>
        div {
            position: absolute;
            left: 0;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        
        span {
            position: absolute;
            display: block;
            height: 200px;
            width: 200px;
            left: 0;
            top: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <button class="b1">点击500</button>
    <button class="b2">800</button>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn1 = document.querySelector('.b1');
        var btn2 = document.querySelector('.b2');


        function fengz(obj, target, goback) {
            clearInterval(obj.time);
            obj.time = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                //判断往上取整还是往下
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //定时器停止
                    clearInterval(obj.time);
                    //回调函数写的位置:定时器结束的位置
                    if (goback) {
                        goback();
                    }

                } else {
                    obj.style.left = obj.offsetLeft + step + 'px';
                }

            }, 15);
        }

        btn1.addEventListener('click', function() {
            fengz(span, 500);
            fengz(div, 500);
        })

        btn2.addEventListener('click', function() {
            fengz(span, 800);
            //回调函数goback
            fengz(div, 800, function() {
                div.style.backgroundColor = 'red';
            });
        })

        // fengz(span, 200);
    </script>
</body>

</html>

三、触屏事件

1.概述

但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件) , Android和IoS都有。
touch对象代表一个触摸点，它可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指或触控笔对屏幕或者触控板操作。
常见的触屏事件如下:
触屏touch事件说明
touchstart 手指到一一个DOM元素时触发
touchmove 手指在-一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

//1.获取元素
var div = document . querySelector( 'div' );
div . addEventL istener( 'touchstart', function() {
console.1og('你好' );
});
div . addEventL istener( ' touchmove', function() {
console.1og('我也好' );
});
div. addEventListener( ' touchend', function() {
console.1og( '大家都好' );
});

2. 触摸事件对象( TouchEvent )

TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、 touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
触摸列表说明
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表，从无到有,从有到无变化
因为平时我们都是给元素注册触摸事件
所以重点记住targetTocuhes

3. 移动端拖动元素

touchstart、touchmove、 touchend 可以实现拖动元素
但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY
.移动端拖动的原理:手指移动中 ,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步曲:
(1 )触摸元素touchstart :获取手指初始坐标,同时获得盒子原来的位置
(2 )移动手指touchmove :计算手指的滑动距离,并且移动盒子
(3)离开手指touchend:
注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault0;

四、本地存储

1. 本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚页面刷新不丢失数据
容量较大, sessionStorage约5M、localStorage约20M
只能存储字符串,可以将对象lSON.stringify()编码后存储

2. window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口页面)下数据可以共享
.以键值对的形式存储使用

存储数据:
sessionStorage.setltem(key, value)
获取数据:
sessionStorage.getltem(key)
删除数据:
sessionStorage.removeltem(key)
删除所有数据:
sessionStorage.clear()

3. window.localStorage

生命周期永久生效,除非手动删除否则关闭页面也会存在
可以多窗口(面)共享(同-浏览器可以共享)

txq231254

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 之 BOM对象（下）

一、offset、client、scroll三大家族介绍及案例1. 元素偏移量 offset系列1.1 offset概述offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、小等。●获得元素距离带有定位父元素的位置●获得元素自身的大小(宽度高度)●注意:返回的数值都不带单位offset系列常用属性:offset系列属性作用element.offsetTop 返回元素相对带有定位父元素上...
复制链接

扫一扫