利用数组生成手风琴图片框

简介：利用js中数组的特性，把图片路径作为元素存入数组，同时打印出页面结构

先看效果：

 

再看代码： 

<style>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .photos{
            /* 设置浮动布局,让子元素为伸缩盒子 */
            display: flex;
            width: 880px;
            height: 250px;
            border: 3px solid skyblue;
            margin: 50px auto;
            overflow: hidden;
            /* 让大盒子和图片一起旋转180°,就能实现另一种方向的效果 */
            /* transform: rotate(180deg); */
        }
        /* 关键点:设置一个盒子包住图片,给盒子固定宽度,利用图片的特性(不会被盒子包住),所以图片依然是超出盒子的,这时候让后面的盒子盖住照片就可以了,就能实现一种叠加的效果 */
        .photos div{
            width: 80px;
            height: 100%;
            transition: all 0.7s;
        }
     /*    .photos div img{
            transform: rotate(180deg);
        } */
        .photos div:hover {
            width: 400px;
        }
    </style>

  <script>
        let arr = [
            './images/1.jpg',
            './images/2.jpg',
            './images/3.jpg',
            './images/4.jpg',
            './images/5.jpg',
            './images/6.jpg',
            './images/7.jpg'
        ]
        // 根据数组元素生成页面内容
        // 设置空字符串保存photots里面的主体内容
        let str = ''
        for(let i = 0 ; i<arr.length ;i++){
            // 字符串拼接主体内容
            str += `<div><img src="${arr[i]}" alt=""></div>`
        }
        console.log(str);
        // 只用一个document.write来打印页面结构
        document.write(`<div class="photos"> ${str} </div>`)
    </script>