首页 > 其他分享> > 手风琴案例(宽度变化)

手风琴案例(宽度变化)

2020-02-20 13:05:30 作者：互联网

运用宽度变化

截图

未展开
未展开状态
展开时
展开图片

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴测试（宽度变化）</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">
    <ul>
    <!--    <li><img src="image/Ariana%20Grande.jpg"><div class="title_div">Ariana Grande</div></li>
        <li><img src="image/Avril%20Lavigne.jpg"><div class="title_div">Avril Lavigne</div></li>
        <li><img src="image/Taylor%20Swift.jpg"><div class="title_div">Taylor Swift</div></li>
        <li><img src="image/Selena%20Gomez.jpg"><div class="title_div">Selena Gomez</div></li>
        <li><img src="image/G.E.M.%20邓紫棋.jpg"><div class="title_div">G.E.M. 邓紫棋</div></li>
        <li><img src="image/Justin%20Bieber.jpg"><div class="title_div">Justin Bieber</div></li>
        <li><img src="image/dog.jpg"><div class="title_div">狗</div></li>
        <li><img src="image/1.jpg"><div class="title_div">船</div></li>-->

        <li><img src="image/Ariana%20Grande.jpg"></li>
        <li><img src="image/Avril%20Lavigne.jpg"></li>
        <li><img src="image/Taylor%20Swift.jpg"></li>
        <li><img src="image/Selena%20Gomez.jpg"></li>
        <li><img src="image/G.E.M.%20邓紫棋.jpg"></li>
        <li><img src="image/Justin%20Bieber.jpg"></li>
        <li><img src="image/dog.jpg"></li>
        <li><img src="image/1.jpg"></li>
    </ul>
    <!--<div class="right_box"><img src="image/1.jpg"></div>-->
</div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.container{   /*容器*/
    width: 1200px;
    height: 400px;
    position: relative;
    margin: 100px auto;
    background-color: darkgrey;
    /*overflow:hidden;*/
}
.container ul {
    list-style: none;

}
.container ul li{
    z-index: 5;
    width: 150px;
    height: 400px;
    float: left;
    overflow: hidden;
    /*transition:1s;*/  /*加过渡有bug*/
}
.container ul li img{
    height: 400px;
    width: 598px;
}

.container ul li .title_div{   /*下面标题*/
    font-size: 15px;
    text-align: center;
    position: absolute;
    width: 100px;
    height:0px;
    background-color: #ffcf32;
    line-height: 30px;
    left:0px;
}
.container ul li:hover .title_div{
    height: 30px;
}

JS部分

window.onload=function () {
    var img_box=document.getElementsByTagName("li");
    for (var i=0;i<8;i++){           /*即时调用函数写法*/
        (function (i) {
            img_box[i].onmouseover=function () {
                img_box[i].style.width=598+"px";
                for (var a=0;a<8;a++){
                    if(a!=i){    /*除了被选中的图片 其他图片宽度都减小*/
                        img_box[a].style.width=86+"px";
                    }
                }
            }

            img_box[i].onmouseout=function () {
                for(var b=0;b<8;b++){
                    img_box[b].style.width=150+"px"; /*当鼠标移出时 所有图片恢复到初始状态*/
                }

            }

        })(i);
    }

}

酸霉汤发布了18 篇原创文章 · 获赞 0 · 访问量 261 私信关注

标签：container,ul,li,案例,宽度,400px,手风琴,height,width
来源： https://blog.csdn.net/iTaylorfan/article/details/104408654