jQuery尺寸、位置操作

jQuery

jQuery尺寸、位置操作

1. 尺寸

1.1 说明

image-20230320191948156

1.2 语法

image-20230320192001086

1.3 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: #b32a46;
            padding: 10px;
            margin: 20px;
            border: 15px solid blueviolet;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        span {
            display: block;
            color: aliceblue;
        }
    </style>
</head>

<body>
    <div>
        <span>欧克</span>
        <span>欧克</span>
        <span>欧克</span>
        <span>欧克</span>
    </div>
    <script>
        $(function () {
            // 1. width() / height() 获取设置元素本身 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));

            //  以上参数为空，则是获取相应值，返回的是数字型。
            //  如果参数为数字，则是修改相应值。
            //  参数可以不必写单位。

            var arr = ['width()=' + $("div").width(), 'innerWidth()=' + $("div").innerWidth(), 'outerWidth()=' + $("div").outerWidth(), 'outerWidth(true)=' + $("div").outerWidth(true)]
            $('span').each(function(i, el) {
                $(el).html(arr[i]);
            })

            // js
            // var arr2 = $('span')
            // for (var i = 0; i < arr2.length; i++) {
            //     arr2[i].innerHTML=arr[i]
            // }
        })
    </script>
</body>

</html>

2. 位置

2.1 三大位置

2.11 offset()

  • offset()设置或获取元素偏移 (基于文档流)

image-20230320192215624

2.12 position()

  • position() 获取元素偏移(基于定位，如果父级都没有定位，则以文档为准)

image-20230320192225278

2.13 scrollTop()/scrollLeft()

  • scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

image-20230320192232924

2.2 代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dad {
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            color: white;
            background-color: blueviolet;
            margin: 100px;
            /* overflow: hidden; */
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="dad">
        dad
        <div class="son">son</div>
    </div>
    <script>
        //  jQuery 位置
        // 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
        $(function () {
            // 1. offset() 设置或获取元素偏移(基于文档流)
            // ① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
            // ② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
            // $('.son').html('距离文档最左'+$('.son').offset().left);
            $('.son').html('距离文档最上' + $('.son').offset().top);
            // ③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
            $('.son').offset({
                top: 110,
                left: 100
            })
            // $('.son').html('距离文档最上' + $('.son').offset().top);


            // 2. position() 获取元素偏移(基于定位，如果父级都没有定位，则以文档为准)
            // ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
            // ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
            // ③ 该方法只能获取。
            // $('.son').html('距离父盒子最上' + $('.son').position().left);
            $('.son').html('距离父盒子最上' + $('.son').position().top);
        })
    </script>
</body>

</html>

2.3 缓动回顶部案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            height: 1000px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: brown;
            position: relative;
        }

        span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: bisque;
            text-align: center;
            line-height: 200px;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translate(-50%);
        }

        .back {
            display: none;
            z-index: 1;
            position: fixed;
            right: 50px;
            bottom: 50px;
            background-color: blueviolet;
            color: white;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="back">up</div>
    <div class="container"></div>
    <span></span>
    <script>
        $(function () {
            // 3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
            // ① scrollTop() 方法设置或返回被选元素被卷去的头部。
            // ② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
            // $(document).scrollTop(100)
            $(window).scroll(function () {
                $('span').html($(document).scrollTop())
                if ($(document).scrollTop() >= $('.container').offset().top) {
                    $('.back').fadeIn()
                } else {
                    $('.back').fadeOut()
                }

                $('.back').click(function () {
                    // 不能是文档document，而是html和body元素做动画
                    $('body,html').stop().animate({
                        scrollTop: 0
                    })
                })
            })

        })
    </script>
</body>

</html>

3. 案例：品优购电梯导航

3.1 思路

第一步

image-20230320192506615

第二步

image-20230320192542462

3.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$(function () {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;

    // 1.当滚动到今日推荐栏目时，电梯导航显示
    // 页面滚动加载或者刷新时执行toggleTool()函数
    function toggleTool() {
        if ($(document).scrollTop() >= $('.recommend').offset().top) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }
    toggleTool()

    $(window).scroll(function () {
        toggleTool()

        // 3.当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，
        // 也会添加current类， 兄弟移除current类。
        // each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
        if (flag) {
            $('.floor .w').each(function (index, element) {
                // ⑤ 判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
                if ($(document).scrollTop() >= $(element).offset().top) {
                    // ⑥ 就利用这个索引号找到相应的电梯导航小li添加类。
                    $('.fixedtool').find('li').eq(index).addClass('current').siblings().removeClass('current')
                }
            })
        }
    })

    // 2.点击电梯Li时，添加current，并且去到相应的模块
    $('.fixedtool').find('li').click(function () {
        flag = false
        // 2.1添加current
        $(this).addClass('current').siblings().removeClass('current')

        // 2.2并且去到相应的模块
        // 相应的模块的索引
        var index = $(this).index()
        // 要移动的距离
        var distance = $('.floor .w').eq(index).offset().top
        // 页面移动
        $('html,body').stop().animate({
            scrollTop: distance
        },function(){
            flag = true
        })
    })
})

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~