博客

jQuery offset()实例

  • Post category:jquery

当我们开发网页时，通常需要获取 DOM 元素在页面上的位置（相对于浏览器窗口的位置）。这时 jQuery 使用 offset() 方法可以轻松解决问题。下面就来详细讲解一下 jQuery offset() 方法的用法及实例展示。

一、offset() 方法简介

offset() 方法用于获取设置匹配元素相对于文档的偏移（offset）,返回一个具有 top 和 left 属性的对象。该方法仅对可见元素有效。

二、offset() 方法的用法

1. 获取元素偏移量

使用 offset() 方法可以获取到指定元素相对于文档的偏移量。示例如下：

// 获取 #box 元素相对于文档的偏移量
var offset = $('#box').offset();
console.log('偏移量为: ' + offset.top + ',' + offset.left);

上面代码使用 offset() 方法获取 #box 元素的偏移量，这里主要注意两点：

  • 该方法只适用于可见元素，如果一个元素为 dislay:none，则该方法获取的值将为 undefined。
  • 获取到的位置值 top 和 left 的单位是像素（pixel）。

2. 设置元素偏移量

除了获取偏移量，我们还可以使用 offset() 方法来设置元素在文档中的偏移位置。下面的示例代码将让 #box 元素的位置在页面载入后距离浏览器顶部 200 像素，距离浏览器左侧 300 像素的位置。

$('#box').offset({ top: 200, left: 300 });

注意：设置元素偏移量后，将导致文档重新渲染，这将可能带来性能问题，谨慎使用。

三、offset() 方法的示例说明

示例一：点击移动图像位置

下面是一个实例，展示了如何使用 offset() 方法完成点击移动图像位置的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery offset() 示范</title>
    <style>
        img {
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <img id="img1" src="1.jpg">
    <script src="jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var isMove = false; //鼠标是否点击
            var mouseX = 0; //鼠标相对于图像的x位置
            var mouseY = 0; //鼠标相对于图像的y位置

            // 图像mousedown事件
            $("#img1").mousedown(function(event){
                isMove = true;
                mouseX = event.pageX - $(this).offset().left;
                mouseY = event.pageY - $(this).offset().top;
            });

            // 鼠标移动事件
            $(document).mousemove(function(event){
                if(isMove){
                    // 鼠标移动时，修改图像位置
                    var x = event.pageX - mouseX; //鼠标移动后的图像距离浏览器左边的距离
                    var y = event.pageY - mouseY; //鼠标移动后的图像距离浏览器上面的距离
                    $("#img1").offset({top: y, left: x});
                }
            });

            // 鼠标mouseup事件
            $(document).mouseup(function(){
                isMove = false; //移动结束
            });
        });
    </script>
</body>
</html>

在页面中加载 1.jpg 图片，并将其位置设置为绝对定位。使用 mousedown 事件记录鼠标点击时相对于图像的位置，使用 mousemove 事件动态修改图像位置，最后使用 mouseup 事件通知鼠标移动事件结束。

示例二：选项卡切换

下面是一个实例，展示了如何使用 offset() 方法实现选项卡切换效果。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery offset() 示例</title>
    <meta charset="UTF-8">
    <style>
        #tab_head {
            position: relative;
            height: 30px;
            line-height: 30px;
        }

        #tab_body {
            height: 200px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .tab_head_item {
            display: inline-block;
            width: 80px;
            height: 24px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            margin-right: 5px;
            border: 1px solid #ddd;
        }

        .tab_body_item {
            display: none;
            position: relative;
            width: 100%;
            height: 100%;
            padding-top: 50px;
            text-align: center;
            font-size: 20px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <div id="tab_head">
        <div class="tab_head_item" data-id="tab1">Tab1</div>
        <div class="tab_head_item" data-id="tab2">Tab2</div>
        <div class="tab_head_item" data-id="tab3">Tab3</div>
    </div>

    <div id="tab_body">
        <div class="tab_body_item" id="tab1">内容1</div>
        <div class="tab_body_item" id="tab2">内容2</div>
        <div class="tab_body_item" id="tab3">内容3</div>
    </div>

    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // 点击改变选项卡
            $('.tab_head_item').click(function(){
                var id = $(this).data('id'); //获取点击的选项卡id
                var x = $('#' + id).offset().left - $('#tab_body').offset().left;
                $('#tab_head .tab_head_item').removeClass('tab_current');
                $(this).addClass('tab_current');
                $('#tab_body .tab_body_item').hide();
                $('#' + id).show();
                $('#tab_body').animate({scrollLeft: x},500); //动画效果滚动到指定选项卡位置
            });
        });
    </script>
</body>
</html>

在页面中放置多个选项卡，选项卡标题使用 tab_head_item 样式，选项卡标题对应的内容使用 tab_body_item 样式，并将所有内容区域隐藏。使用 offset() 获取指定选项卡区域距离容器左侧的距离，并通过 scrollLeft 属性实现动画效果跳转，并显示指定选项卡对应的内容（id 与指定选项卡标题的 data-id 属性值对应）。

Tags: