用js写出手风琴效果

我真的不会敲呀

已于 2023-04-10 16:15:36 修改

阅读量3.3k

点赞数 4

文章标签： css html css3

于 2022-11-06 15:34:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_68446882/article/details/127715247

版权

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)

完成以下效果如下