手风琴案例

最新推荐文章于 2022-05-29 16:53:11 发布

余生94ww

最新推荐文章于 2022-05-29 16:53:11 发布

阅读量100

点赞数

文章标签： css html sass javascript

本文链接：https://blog.csdn.net/ww_Filling_it/article/details/124908000

版权

<!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>手风琴案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            height: 100vh;
            background-image: url(../img/li2.png);
            background-size: cover;
            background-position: center center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            width: 800px;
            height: 400px;

        }

        ul li {
            width: 80px;
            height: 100%;
            float: left;
            background-size: cover;
            background-position: center center;
            /* 添加过渡属性 */
            transition: .3s;
        }

        .open {
            width: 480px;
        }

        li p {
            width: 80px;
            height: 100%;
            background-color: rgba(255, 255, 255, .5);
            color: white;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="open" style="background-image:url(../img/li2.png) ;">
            <p>李溪芮</p>
        </li>
        <li style="background-image:url(../img/c罗.png) ;">
            <p>c罗</p>
        </li>
        <li style="background-image:url(../img/meixi.png) ;">
            <p>梅西</p>
        </li>
        <li style="background-image:url(../img/dd.png) ;">
            <p>德布劳内</p>
        </li>
        <li style="background-image:url(../img/nme.png) ;">
            <p>内马尔</p>
        </li>
    </ul>
</body>
<script>
    //获取li
    var lis = document.getElementsByTagName("li");
    var showIndex = 0;//当前展开open的下标
    for (var i = 0; i < lis.length; i++) {
        //动态为li添加属性
        lis[i].index = i;
        lis[i].onclick = function () {
            if (showIndex === this.index) {
                return;
            }
            //收起来已经展开的li
            //1.暴力解决for循环
            //2.动态添加下标
            lis[showIndex].className = "";
            //展开点击的li（this）
            this.className = "open";
            //xiugai showIndex
            showIndex = this.index;
            //修改body的背景图
            document.body.style.backgroundImage = this.style.backgroundImage;
        }
    }
</script>

</html>

案例结果如下：

<!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>测试三</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 730px;
            /* height: 480px; */
        }

        ul li {
            width: 100%;
            /* height: 320px; */
            background-color: skyblue;
        }

        .open {
            width: 100%;
            height: 240px;
            background-color: pink;
            display: none;
        }

        ul li p {
            width: 100%;
            height: 80px;
            height: 80px;
            line-height: 80px;
            font-size: 24px;
            color: #fff;
            overflow: hidden;
        }

        ul li p span {
            font-size: 20px;
            float: right;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <p>
                全栈技能<span>+展开</span>
            </p>
            <div class="open">
                数据库 主流框架 第三方生态 软件模式 领域驱动设计
            </div>
        </li>
        <li>
            <p>
                交付技能<span>+展开</span>
            </p>
            <div class="open">
                数据库 主流框架 第三方生态 软件模式 领域驱动设计
            </div>
        </li>
        <li>
            <p>
                底层技能<span>+展开</span>
            </p>
            <div class="open">
                数据库 主流框架 第三方生态 软件模式 领域驱动设计
            </div>
        </li>

    </ul>

</body>
<script>
    var dSpan = document.querySelectorAll("span");
    var dOpen = document.querySelectorAll(".open");
    var showIndex = 0;
    for (var i = 0; i < dSpan.length; i++) {
        dSpan[i].index = i;
        dSpan[i].onclick = function () {
            // if (showIndex === this.index)  return;
            if (showIndex === 0) {
                for (var j = 0; j < dOpen.length; j++) {
                    dOpen[j].style.display = "none";
                }
                this.parentNode.nextElementSibling.style.display = "block";
                this.innerHTML = '^收缩';
                showIndex = 1;
            } else {
                this.parentNode.nextElementSibling.style.display = "none";
                this.innerHTML = '+展开';
                showIndex = 0;

            }
        }
    }
    // console.log(dSpan)
    // console.log(lis)
    // console.log(i)
</script>

</html>