手风琴案例(层级关系)

最新推荐文章于 2022-11-20 20:53:52 发布

酸霉汤

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量188

点赞数

分类专栏： # JS 文章标签： html js css

本文链接：https://blog.csdn.net/iTaylorfan/article/details/104397197

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

练手，代码写的太长。。。

截图

手风琴截图

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴测试</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">
<ul>
    <li style="z-index: 5;"><img src="image/1.jpg"><div class="title_div">Taylor Swift</div></li>
    <li style="z-index: 4;"><img src="image/2.jpg"><div class="title_div">Carly Jepsen</div></li>
    <li style="z-index: 3;"><img src="image/3.jpg"><div class="title_div">Charli XCX</div></li>
    <li style="z-index: 2;"><img src="image/4.jpg"><div class="title_div">Dua Lipa</div></li>
    <li style="z-index: 1;"><img src="image/5.jpg"><div class="title_div">Justin Bieber</div></li>
</ul>
</div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 1200px; /*第一张默认显示600px 其余四张缩小150px*/
    height: 400px;
    position: relative;
    margin: 100px auto 0 auto;
    background-color: darkgray;
}
.container ul{
    list-style: none;
}
.container ul li{
    width: 150px;
    height: 40px;
    float: left;
    position: relative;
}
.container ul li img{
    width: 600px;
    height: 400px;
}
.container ul li .title_div{
    font-size: 15px;
    text-align: center;
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: #ffffff;
    line-height: 30px;
    left: 500px;
    transition: 1s;
}
.container ul li:hover{
    cursor: pointer;
}

JS部分

window.onload=function () {
    var img_Box=document.getElementsByTagName("li");   /*获取所有li*/
    var title_Box=document.getElementsByClassName("title_div");

    title_Box[0].style.backgroundColor="#45D5FF";
    title_Box[1].style.backgroundColor="red";
    title_Box[2].style.backgroundColor="#FFCF32";
    title_Box[3].style.backgroundColor="#ff8077";
    title_Box[4].style.backgroundColor="#ff49f9";
    for (var i=0;i<img_Box.length;i++){
        (function (i) {
            if(i!=0){
                if(i==1)
                {
                    img_Box[i].onmouseover=function () {
                        img_Box[i].style.zIndex=5;

                        title_Box[0].style.left=0;
                    }
                    img_Box[i].onmouseout=function () {
                        img_Box[i].style.zIndex=4;

                        title_Box[0].style.left=500+"px";
                    }
                }
                else if (i==2) {
                    img_Box[i].onmouseover = function () {
                        img_Box[1].style.zIndex=5;
                        img_Box[2].style.zIndex=5;

                        title_Box[0].style.left=0;
                        title_Box[1].style.left=0;
                    }
                    img_Box[i].onmouseout = function () {
                        img_Box[1].style.zIndex=4;
                        img_Box[2].style.zIndex=3;

                        title_Box[0].style.left=500+"px";
                        title_Box[1].style.left=500+"px";
                    }
                }
                else if (i==3){
                    img_Box[i].onmouseover = function () {
                        img_Box[1].style.zIndex=5;
                        img_Box[2].style.zIndex=5;
                        img_Box[3].style.zIndex=5;

                        title_Box[0].style.left=0;
                        title_Box[1].style.left=0;
                        title_Box[2].style.left=0;

                    }
                    img_Box[i].onmouseout = function () {
                        img_Box[1].style.zIndex=4;
                        img_Box[2].style.zIndex=3;
                        img_Box[3].style.zIndex=2;

                        title_Box[0].style.left=500+"px";
                        title_Box[1].style.left=500+"px";
                        title_Box[2].style.left=500+"px";
                    }
                }
                else if (i==4){
                    img_Box[i].onmouseover = function () {
                        img_Box[1].style.zIndex=5;
                        img_Box[2].style.zIndex=5;
                        img_Box[3].style.zIndex=5;
                        img_Box[4].style.zIndex=5;

                        title_Box[0].style.left=0;
                        title_Box[1].style.left=0;
                        title_Box[2].style.left=0;
                        title_Box[3].style.left=0;
                    }
                    img_Box[i].onmouseout = function () {
                        img_Box[1].style.zIndex=4;
                        img_Box[2].style.zIndex=3;
                        img_Box[3].style.zIndex=2;
                        img_Box[4].style.zIndex=1;

                        title_Box[0].style.left=500+"px";
                        title_Box[1].style.left=500+"px";
                        title_Box[2].style.left=500+"px";
                        title_Box[3].style.left=500+"px";
                    }
                }
            }

        })(i);
    }
}

酸霉汤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手风琴案例(层级关系)

练手，代码写的太长。。。截图HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴测试</title> <link rel="stylesheet" href="css/main.css...
复制链接

扫一扫