javascript - 如何用js实现四个色块的透明度设置以及层级设置呢？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

是这样的，本周接到一个任务，题目描述如下

我的JS代码是这样写的，逻辑还是挺简单的。比如上移一层就是先获取到点击的方块对象$self,再在四个方块对象里找到一个z-index刚好比它大1的，使其z-index - 1,再令$self的z-index + 1

目前有一些意料之外的问题，比如：四个按钮轮流点击的时候，有时功能和预想的逻辑不符，只是使用一个按钮事件的时候，效果就好很多；上移一层，下移一层，设想是点击绿色方块，再点击上移一层，但结果却是，同时改变了两个方块的相对位置。
我不清楚是哪里出错，还请各位大虾指点！

ringa_lee

全部回复(1)

伊谢尔伦2017-04-10 15:19:47 1楼

其实看到这个题非常有趣才进来答的，没仔细看题主的代码，抱歉……

其实对于脱离了文档流的元素，并不一定是非要以z-index来决定它和其他元素的z轴关系，而是相同z-index的情况下越靠后的元素z轴权重越高，所以不妨不要去管z-index，直接移动元素在节点中的位置了……

另外题主那代码，$self指向的是包含了四个节点的jquery对象，你直接对这个对象使用css()之类的方法可能欠妥。

直接放代码吧，JS是下面这段

window.onload = function() {
    var box = document.querySelectorAll('.box')

    //选中的元素添加selected类
    for (var i = 0;i < box.length;i ++) {
        box[i].addEventListener('click', function() {
            for (var i = 0;i < box.length;i ++) {
                box[i].classList.remove('selected')
            }

            this.classList.add('selected')
        }, false)
    }

    //设置透明度
    var set = document.querySelector('[value=set]')
    set.onclick = function() {
        var opacity = (document.querySelector('[type=Number]').value)/100
        document.querySelector('.selected').style.opacity = opacity
    }

    //上移
    var up = document.querySelector('[value=up]')
    up.onclick = function() {
        var selected = document.querySelector('.selected')

        if (selected.nextElementSibling != null) {
            selected.parentNode.insertBefore(selected.nextElementSibling, selected)
        }
    }

    //下移
    var down = document.querySelector('[value=down]')
    down.onclick = function() {
        var selected = document.querySelector('.selected')

        if (selected.previousElementSibling != null) {
            selected.parentNode.insertBefore(selected, selected.previousElementSibling)
        }
    }

    //置顶
    var top = document.querySelector('[value=top]')
    top.onclick = function() {
        var selected = document.querySelector('.selected')

        selected.parentNode.appendChild(selected)
    }

    //置底
    var bottom = document.querySelector('[value=bottom]')
    bottom.onclick = function() {
        var selected = document.querySelector('.selected')

        selected.parentNode.insertBefore(selected, selected.parentNode.firstElementChild)
    }
}

整个html文件在这里，直接copy了放在文件中，浏览器打开就ok

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p class="main">
        <p class="box1 box"></p>
        <p class="box2 box"></p>
        <p class="box3 box"></p>
        <p class="box4 box"></p>
    </p>
    <lable>透明度</lable>
    <input type="number" min="0" max="100" step="1">
    <input type="button" value="set">
    <br>
    <input type="button" value="up">
    <input type="button" value="down">
    <input type="button" value="top">
    <input type="button" value="bottom">

    <script>
        window.onload = function() {
            var box = document.querySelectorAll('.box')

            //选中的元素添加selected类
            for (var i = 0;i < box.length;i ++) {
                box[i].addEventListener('click', function() {
                    for (var i = 0;i < box.length;i ++) {
                        box[i].classList.remove('selected')
                    }

                    this.classList.add('selected')
                }, false)
            }

            //设置透明度
            var set = document.querySelector('[value=set]')
            set.onclick = function() {
                var opacity = (document.querySelector('[type=Number]').value)/100
                document.querySelector('.selected').style.opacity = opacity
            }

            //上移
            var up = document.querySelector('[value=up]')
            up.onclick = function() {
                var selected = document.querySelector('.selected')

                if (selected.nextElementSibling != null) {
                    selected.parentNode.insertBefore(selected.nextElementSibling, selected)
                }
            }

            //下移
            var down = document.querySelector('[value=down]')
            down.onclick = function() {
                var selected = document.querySelector('.selected')

                if (selected.previousElementSibling != null) {
                    selected.parentNode.insertBefore(selected, selected.previousElementSibling)
                }
            }

            //置顶
            var top = document.querySelector('[value=top]')
            top.onclick = function() {
                var selected = document.querySelector('.selected')

                selected.parentNode.appendChild(selected)
            }

            //置底
            var bottom = document.querySelector('[value=bottom]')
            bottom.onclick = function() {
                var selected = document.querySelector('.selected')

                selected.parentNode.insertBefore(selected, selected.parentNode.firstElementChild)
            }
        }
    </script>

    <style>
        .main {
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 200px;
        }
        .box1 {
            position: absolute;
            width: 50px;
            height: 100px;
            left: 40%;
            top: 40%;
            background-color: #9c47a3;
        }
        .box2 {
            position: absolute;
            width: 100px;
            height: 50px;
            left: 45%;
            top: 25%;
            background-color: #25b3ff;
        }
        .box3 {
            position: absolute;
            width: 50px;
            height: 100px;
            left: 35%;
            top: 5%;
            background-color: #edf51b;
        }
        .box4 {
            position: absolute;
            width: 100px;
            height: 50px;
            left: 6%;
            top: 35%;
            background-color: #20d658;
        }
        .selected::before {
            content: 'selected!';
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>