手风琴案例(宽度变化)

最新推荐文章于 2024-04-24 09:27:42 发布

酸霉汤

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量292

点赞数

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

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

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

运用宽度变化

截图

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

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);
    }

}

酸霉汤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手风琴案例(宽度变化)

运用宽度变化HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴测试（宽度变化）</title> <link rel="stylesheet" href="css/css.css">...
复制链接

扫一扫