用js写出手风琴效果

1.首先我们先看一下效果（更清楚的效果在文章最后面的视频处）

2.制作手风琴我们要先完成html和css的样式制作

创建一个大div盒子里面放入内容的div-box1

另外三张图会在后面通过渲染的方式加上去

<div class="box">
        <div class="box1">
            <img src="./img/01.jpeg" alt="">
            <div class="text">天空/div>
            <div class="msg">这是一张图</div>
            <ul class="ul">
                <li>天空</li>
            </ul>
        </div>
    </div>

完成基本的布局后通过css对样式进行一下美化（css代码放到了后文）

然后通过js代码的引入渲染后变成下面这样 （引入的数据是自己写的一个数组也放到了下文data.js中）

var box = document.getElementsByClassName('box')[0]
function assData(data){     
    box.innerHTML = ""
    for(var i = 0; i<data.length;i++ ){
        box.innerHTML += '<div class="box1"><img src="'+data[i]["img"]+'"alt=""><div class="text">天空</div><div class="msg">'+data[i]["msg"] +'</div><ul><li>天空</li></ul></div>'
       
    }
}
assData(data)

 完成以下效果如下

 3.样式完成之后，用js来控制样式的变化了

首先我们来获取一下box1因为是用box1中的点击来控制样式的

var box1 = document.getElementsByClassName("box1")

 完成后给box1一个for循环并绑定点击事件

for (var i = 0; i < box1.length; i++) {
    //点击事件
    box1[i].onclick = function () {
}

然后进行判断并添加一个排它，即 点击任意一张图时，全部图的宽设为130px，然后将点击的那张宽设为500px 达到一个伸缩的动态效果。

box1[i].onclick = function () {
        if (this.style.width == '130px') {
            for (var j = 0; j < box1.length; j++) {
                box1[j].style.width = '130px'
                }
                this.style.width = '500px'
        }
}

 然后是将之前关闭的样式描述打开 ，即width（宽）500px时将display设为 block,

宽为130px,设为none即关闭

var box1 = document.getElementsByClassName("box1")
for (var i = 0; i < box1.length; i++) {
    //点击事件
    box1[i].onclick = function () {
        if (this.style.width == '130px') {
            for (var j = 0; j < box1.length; j++) {
                box1[j].style.width = '130px'
            }
            this.style.width = '500px'
            //点开时默认打开
            this.children[2].style.display = 'block'
            this.children[3].style.display = 'block'
        } else {
            // console.log(this.children[3]);
            this.style.width = '130px'
            this.children[2].style.display = 'none'
            this.children[3].style.display = 'none'
        }
    }
}

 4.完成上面后我们可以增加鼠标的移入移出效果

 //移入事件
    box1[i].onmouseenter = function () {
        if (this.style.width == '500px') {
            this.children[2].style.display = 'block'
            this.children[3].style.display = 'block'
        }
    }
    //移出事件
    box1[i].onmouseleave = function () {
        if (this.style.width == '500px') {
            this.children[2].style.display = 'none'
            this.children[3].style.display = 'none'
        }
    }

 完成后就可以实现手风琴效果了

 ——html代码

    <div class="box">
        <div class="box1">
            // 这一段中通过js渲染加上去的
        </div>
    </div>
    <script src="./data.js"></script>
    <script src="./1功能.js"></script>

 ——css代码

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: black;   
}
.box{
    width: 1020px;
    height: 500px;
    display: flex;
    margin: 200px auto;
    color: aliceblue;
}
.box1{
    width: 500px;
    height: 500px;
    font-size: 0px;
    position:relative;
    transition: all 1s;
}
.text{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.msg{
    width: 500px;
    height: 30px;
    line-height: 30px;
    background-color: black;
    opacity: 0.5;
    font-size: 14px;
    position:absolute;
    left: 0px;
    bottom: 0px;
    display: none;   
}
ul{
    width: 500px;
    height: 30px;
    line-height: 30px;   
    position:absolute;
    left: 100px;
    bottom: 0px;
    display: none;
    overflow: hidden;  
}
img{
    width: 500px;
    height: 500px;
}
ul li {
    float: left;
    width: 25%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    list-style: none;   
}

.box1{
     width: 130px;
    overflow: hidden; 
}

———data.js

var data = [
{
    img : "./img/01.jpeg",
    msg: "我是一段话",

},
{
    img : "./img/02.jpeg",
    msg: "我也是一段话",

},
{
    img : "./img/03.jpeg",
    msg: "我还是一段话",

},
{
    img : "./img/04.jpeg",
    msg: "最后一张了",

},
]

 ——功能.js代码

var box = document.getElementsByClassName('box')[0]
function assData(data){     
    box.innerHTML = ""
    for(var i = 0; i<data.length;i++ ){
        box.innerHTML += '<div class="box1"><img src="'+data[i]["img"]+'"alt=""><div class="text">天空</div><div class="msg">'+data[i]["msg"] +'</div><ul><li>天空</li></ul></div>'
       
    }
}
assData(data)
//
var box1 = document.getElementsByClassName("box1")
for (var i = 0; i < box1.length; i++) {
    //点击事件
    box1[i].onclick = function () {
        if (this.style.width == '130px') {
            for (var j = 0; j < box1.length; j++) {
                box1[j].style.width = '130px'
            }
            this.style.width = '500px'
            //点开时默认打开
            this.children[2].style.display = 'block'
            this.children[3].style.display = 'block'
        } else {
            // console.log(this.children[3]);
            this.style.width = '130px'
            this.children[2].style.display = 'none'
            this.children[3].style.display = 'none'
        }
    }

    //移入事件
    box1[i].onmouseenter = function () {
        if (this.style.width == '500px') {
            this.children[2].style.display = 'block'
            this.children[3].style.display = 'block'
        }
    }
    //移出事件
    box1[i].onmouseleave = function () {
        if (this.style.width == '500px') {
            this.children[2].style.display = 'none'
            this.children[3].style.display = 'none'
        }
    }
}