javascript 通过单击div动态更改ZIndex

siv3szwd  于 2023-03-16  发布在  Java
关注(0)|答案(3)|浏览(120)

我正在写一些东西像windows7的概念。双击一个图标一个窗口将打开。如果你双击一个图标，例如4倍4窗口将为您打开。当我们有许多打开的窗口时，当你点击一个窗口它的z索引应该增加，并显示在其他打开的窗口。我的问题是，我不能写代码为它的z-索引，实际上当你点击一个图标时，它只打开一次，当你再次点击时，没有发生任何事情。

let pc = document.getElementById('pc')
let folder = document.getElementById('folder')
let bin = document.getElementById('bin')
let pcwindow = document.getElementById('pcwindow')
let folderwindow = document.getElementById('folderwindow')
let binwindow = document.getElementById('binwindow')
let pcwindow2 = document.getElementById('pcwindow2')
let folderwindow2 = document.getElementById('folderwindow2')
let folderwindow3 = document.getElementById('folderwindow3')
let binwindow2 = document.getElementById('binwindow2')
let binwindow3 = document.getElementById('binwindow3')
let setting = document.getElementById('setting')
let f2 = document.getElementById('f2')
let f3 = document.getElementById('f3')
let f4 = document.getElementById('f4')
let pic = document.getElementById('pic')
let folder2 = document.getElementById('folder2')
let pcwindow3 = document.getElementById('pcwindow3')
let b1 = document.getElementById('b1')
let b2 = document.getElementById('b2')
let b3 = document.getElementById('b3')
let b4 = document.getElementById('b4')
let b5 = document.getElementById('b5')
let b6 = document.getElementById('b6')
let b7 = document.getElementById('b7')
let b8 = document.getElementById('b8')
let b9 = document.getElementById('b9')


pc.addEventListener("dblclick", () => {

    pcwindow.style.display = "block"
    pcwindow.style.top = "50px"
    pcwindow.style.left = "100px"


})

b1.addEventListener("click", () => {

    pcwindow.style.display = "none"

})

folder.addEventListener("dblclick", () => {

    folderwindow.style.display = "block"
    folderwindow.style.top = "75px"
    folderwindow.style.left = "100px"

})

b2.addEventListener("click", () => {

    folderwindow.style.display = "none"

})

bin.addEventListener("dblclick", () => {

    binwindow.style.display = "block"
    binwindow.style.top = "95px"
    binwindow.style.left = "100px"

})

b3.addEventListener("click", () => {

    binwindow.style.display = "none"

})

setting.addEventListener("dblclick", () => {

    pcwindow2.style.display = "block"
    pcwindow2.style.top = "110px"
    pcwindow2.style.left = "100px"

})

b4.addEventListener("click", () => {

    pcwindow2.style.display = "none"

})

folder2.addEventListener("dblclick", () => {

    pcwindow3.style.display = "block"
    pcwindow3.style.top = "125px"
    pcwindow3.style.left = "100px"

})

b7.addEventListener("click", () => {

    pcwindow3.style.display = "none"

})

f2.addEventListener("dblclick", () => {

    folderwindow2.style.display = "block"
    folderwindow2.style.top = "140px"
    folderwindow2.style.left = "100px"

})

b5.addEventListener("click", () => {

    folderwindow2.style.display = "none"

})

pic.addEventListener("dblclick", () => {

    folderwindow3.style.display = "block"
    folderwindow3.style.top = "155px"
    folderwindow3.style.left = "100px"

})

b8.addEventListener("click", () => {

    folderwindow3.style.display = "none"

})

f3.addEventListener("dblclick", () => {

    binwindow2.style.display = "block"
    binwindow2.style.top = "170px"
    binwindow2.style.left = "100px"

})

b6.addEventListener("click", () => {

    binwindow2.style.display = "none"

})

f4.addEventListener("dblclick", () => {

    binwindow3.style.display = "block"
    binwindow3.style.top = "185px"
    binwindow3.style.left = "100px"

})

b9.addEventListener("click", () => {

    binwindow3.style.display = "none"

})

function ad() {
    document.getElementsByClassName('d').style.zIndex = "1"
}
body {
    background-image: url(img/150-1509609_hd-abstract-wallpaper-neon-smoke-71-images-colorful.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.folder {
    width: 80px;
    height: 80px;
}

.folder:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.pc:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.pc {
    width: 80px;
    height: 80px;
}

.bin:hover {
    background-color: rgba(162, 162, 162, 0.195);
}

.bin {
    width: 80px;
    height: 80px;
}

.pcwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#pcwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#pcwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#folderwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow2 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#binwindow3 {
    border: 3px solid black;
    width: 600px;
    height: 400px;
    background-color: white;
    margin: auto;
    display: none;
    position: absolute;
}

#b1 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b2 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b3 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b4 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b5 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b6 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b7 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b8 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

#b9 {
    float: right;
    width: 50px;
    height: 50px;
    background-image: url(img/rsz_cross.png);
}

/* /////////////////////////////////////////////////////////////// */

.taskbar {
    position: fixed;
    bottom: 0;
    height: 43px;
    width: 100%;
    background: #292929;
}

.taskbar .icons-left {
    height: 43px;
    display: inline-block;
}

.taskbar .icons-left #start-menu {
    height: 43px;
    width: 48px;
    position: relative;
    background-image: url(img/Windows_icon_logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-left #start-menu i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21px;
    color: white;
}

.taskbar .icons-left a {
    display: table-cell;
    border-bottom: 2px solid transparent;
}

.taskbar .icons-left a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-left a.border:focus {
    border-bottom: 2px solid rgba(245, 245, 245, 0.651);
}

.taskbar .icons-left .px {
    width: 1px;
}

.taskbar .icons-left .px a {
    pointer-events: none;
}

.taskbar .icons-right {
    height: 43px;
    float: right;
}

.taskbar .icons-right #wifi {
    height: 43px;
    width: 49px;
    background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/wifi.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-right #sound {
    height: 43px;
    width: 49px;
    background-image: url("https://raw.githubusercontent.com/gcazin/pure-css-windows-10-desktop/master/icons/volume.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.taskbar .icons-right .datetime {
    display: table-cell;
    width: 70px !important;
    cursor: pointer;
    padding-top: 3px;
}

.taskbar .icons-right .datetime span {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 11.3px;
    color: white;
}

.taskbar .icons-right .datetime:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a {
    display: table-cell;
}

.taskbar .icons-right a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.taskbar .icons-right a:not(:first-child) {
    margin-left: -4px;
}

.taskbar .icons-right .small-icons {
    width: 24px !important;
}

.zindex1 {
    z-index: 1;
}

.zindex2 {
    z-index: -1;
}
<!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>
    <link rel="stylesheet" href="content/style.css">
</head>

<body>

    <div class="pc">
        <img id="pc" class="d pc" src="content/img/Gabriel-Leblanc-Historic-Mac-Mac.512.png" alt="">

    </div>

    <div id="folder" class="folder">
        <img class="folder" src="content/img/folder.png" alt="">
    </div>
    <div id="bin" class="bin">
        <img class="bin" src="content/img/icons8-recycle-bin-48.png" alt="">
    </div>
    <div id="pcwindow" class="d pcwindow">
        <input id="b1" type="button">
        <img id="setting" src="content/img/Settings-Icon-Graphics-15383788-1-580x374.jpg" style="width: 130px;height: 100px; margin-left: 15px;">
        <img id="folder2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="folderwindow" class="d">
        <input id="b2" type="button">
        <img id="pic" class="folderwindow" src="content/img/pic.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img id="f2" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>

    <div id="binwindow" class="d" onclick="ad()">
        <input id="b3" type="button">
        <img id="f3" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img id="f4" src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="pcwindow2" class="d">
        <input id="b4" type="button">
        <img src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/pc2.png" style="width: 100px;height: 100px; margin-left: 15px;">

    </div>
    <div id="pcwindow3" class="d">
        <input id="b7" type="button">
        <img src="content/img/folder2.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">

    </div>
    <div id="folderwindow2" class="d">
        <input id="b5" type="button">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/id.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="folderwindow3" class="d">
        <input id="b8" type="button">
        <img src="content/img/pexels-stein-egil-liland-1933239.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/4545819.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/150-1509609_hd-abstract-wallpaper-neon-smoke-71-images-colorful.jpg" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="binwindow2" class="d">
        <input id="b6" type="button">
        <img src="content/img/ff.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/fff.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>
    <div id="binwindow3">
        <input id="b9" type="button">
        <img src="content/img/file1.png" style="width: 100px;height: 100px; margin-left: 15px;">
        <img src="content/img/file2.png" style="width: 100px;height: 100px; margin-left: 15px;">
    </div>

    <div class="taskbar">
        <div class="icons">
            <div class="icons-left">
                <!-- <div class="btn-group dropup">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> -->
                <a href="start-menu-modal" id="start-menu"><i class="fab fa-windows"></i></a>
                <!-- </button> -->
                <!-- <ul class="dropdown-menu">
                        <li><button class="dropdown-item" type="button">Action</button></li>
                        <li><button class="dropdown-item" type="button">Another action</button></li>
                        <li><button class="dropdown-item" type="button">Something else here</button></li>
                    </ul>
                </div> -->

            </div>
            <div class="icons-right">

                <a href="#sound-modal" id="sound" class="small-icons"></a>
                <a href="#wifi-modal" id="wifi" class="small-icons"></a>
                <div class="datetime">
                    <span class="hour">15:59</span>
                    <span class="date">20/9/2023</span>
                </div>

            </div>
        </div>
    </div>
    <script src="content/script.js"></script>
</body>

</html>
JavaScript

3条答案

按热度按时间
pkbketx9

pkbketx91#

您可以考虑添加一个名为“active”的类，该类的z索引为2，然后向窗口添加一个eventListener，该eventListener将“active”类添加到窗口中。
我制作了一个Fiddle来演示这一点：
在CSS中，我添加了一个名为“active”的类

/* add this class */
.active {
  z-index: 2;
}

然后在JavaScript中，我添加了以下内容：

// this is the portion to make the window active
  newWindow.addEventListener("click", () => {
  if (document.querySelector(".active")) {
    document.querySelector(".active").classList.remove("active");
  }
    newWindow.classList.add("active");
  })
  // end of the portion

每次点击一个窗口，任何现有的“活动”类都会被删除。然后，一个“活动”类会被添加到选中的窗口中。

赞(0）分享  回复(0）举报  2023-03-16
368yc8dk

368yc8dk2#

要动态执行

你可以做的是存储一个名为zIndexCounter的全局变量，在开始时将其设置为0（或者任何其他相关的值），每次创建一个新窗口时，给它分配一个等于这个计数器的z-index，然后递增计数器。
这样就可以确保下一个创建的窗口的z-index总是比前一个窗口的z-index高。

赞(0）分享  回复(0）举报  2023-03-16
h6my8fg2

h6my8fg23#

我没有使用z-index，我创建了一个打开窗口的数组，并将单击的窗口移动到数组的末尾，这样它将出现在其他窗口的顶部。然后删除旧窗口，将新窗口数组添加到页面。
您也可以在此处添加zIndex，但不必要。

windows.forEach((elem) => body.appendChild(elem)); // add rearrange windows to page

到

windows.forEach((elem, i) => {
  elem.style.zIndex = i;
  body.appendChild(elem);
}); // add rearrange windows to page

/* also have to add this in double click function */
window.style.zIndex = len();

抱歉我修改了很多地方。
1.在双击打开的每个窗口中添加.new_window类，这样我就可以更容易地选择它们。
1.删除了js/html/css代码中相同的函数、元素和类。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）分享  回复(0）举报  2023-03-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com