javascript 动态改变层的Z-INDEX的代码style.zIndex-前端开发

下面是讲解“JavaScript 动态改变层的 Z-INDEX 的代码 style.zIndex”的完整攻略。

下面是讲解“JavaScript 动态改变层的 Z-INDEX 的代码 style.zIndex”的完整攻略。

1. 什么是 zIndex

首先要了解的是，zIndex 是 CSS 中的一个属性，控制层的堆叠顺序。值越大的元素会被放在更靠上的位置，覆盖值较小的元素。而 style.zIndex 是一个 JavaScript 属性，可以用来动态修改元素的 zIndex 值。

2. 如何使用 style.zIndex

要使用 style.zIndex，需要先获取到 DOM 元素。可以通过 document.getElementById 或者 document.querySelector 等方式获取到元素，然后直接访问其 style 对象中的 zIndex 属性进行修改。例如：

// 获取元素
let box = document.getElementById('box');

// 修改 zIndex 值为 2
box.style.zIndex = 2;

当然，如果你需要在代码中动态地改变 zIndex 值，可以根据具体的逻辑编写相应的 JS 代码。

下面给出两个示例，帮助理解如何使用 style.zIndex。

示例1：拖拽改变图层顺序

在这个示例中，我们实现了一个可以拖拽的图片与一个基准图形进行比较大小的功能。当鼠标拖拽图片时，可以将其置于顶层，覆盖其他区域的试图。

<!-- HTML 文件 -->
<style>
    .container {
        position: relative;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
    }
    .compare-image {
        position: absolute;
        top: 50px;
        left: 50px;
        cursor: move;
        border: 2px solid #000;
        z-index: 1;
    }
    .base-image {
        position: absolute;
        top: 150px;
        left: 150px;
        width: 300px;
        height: 200px;
        background-color: #ccc;
        z-index: 0;
    }
</style>

<div class="container">
    <div class="overlay"></div>
    <img class="base-image" src="base_image.jpg">
    <img class="compare-image" src="compare_image.jpg">
</div>

// JS 文件
let compareImage = document.querySelector('.compare-image');
let container = document.querySelector('.container');

let isDragging = false;

// 鼠标按下时开始拖拽，将 compare-image 置于顶层
compareImage.addEventListener('mousedown', e => {
    isDragging = true;
    compareImage.style.zIndex = 2;
});

// 鼠标移动时拖拽 compare-image
container.addEventListener('mousemove', e => {
    if (isDragging) {
        compareImage.style.left = e.clientX - compareImage.offsetWidth / 2 + 'px';
        compareImage.style.top = e.clientY - compareImage.offsetHeight / 2 + 'px';
    }
});

// 鼠标松开时停止拖拽，将 compare-image 放回原来的层级
compareImage.addEventListener('mouseup', e => {
    isDragging = false;
    compareImage.style.zIndex = 1;
});

在上面的代码中，compare-image 和 base-image 都被设置了一个 z-index 值，而当鼠标拖拽 compare-image 时，我们将其 zIndex 值设为 2，让它置于顶层。鼠标松开后再将它放到原来的层级，回到比较图与基准图都显示的状态。

示例2：实现弹出层

在这个示例中，我们通过一个按钮点击事件来控制一个弹出层的显示和隐藏。当我们需要显示弹出层时，将其 zIndex 值调大即可。

<!-- HTML 文件 -->
<style>
    .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        width: 400px;
        height: 200px;
        z-index: -1;
        transition: all .3s ease;
        opacity: 0;
        visibility: hidden;
    }
    .modal.is-visible {
        z-index: 100;
        opacity: 1;
        visibility: visible;
    }
</style>

<button id="open-btn">Open Modal</button>

<div class="modal">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p>Consectetur adipiscing elit</p>
    <button id="close-btn">Close Modal</button>
</div>

// JS 文件
let openBtn = document.getElementById('open-btn');
let closeBtn = document.getElementById('close-btn');
let modal = document.querySelector('.modal');

openBtn.addEventListener('click', e => {
    modal.classList.add('is-visible');
    modal.style.zIndex = 100;
});

closeBtn.addEventListener('click', e => {
    modal.classList.remove('is-visible');
});

在上述示例中，初始时 .modal 的 zIndex 值为 -1，即默认隐藏在下方。当点击 open-btn 按钮时，我们通过 JS 将 .modal 的 zIndex 值改为 100，使其处于最顶层，从而显示出来。而在用户点击 close-btn 关闭弹出层时，我们将其 zIndex 值还原为 -1，继续隐藏在下方。

以上是两个简单的示例，展示了如何使用 style.zIndex 实现动态调整图层顺序的功能。希望对您有所帮助。