二：手风琴案例

静态结构动态渲染
- 背景样式：背景样式可以设置图片居中显示
鼠标移入：当前图片的宽度变大，其它的图片的宽度变小
鼠标移出：所有图片的宽度还原为原始值
效果的优化：讨论解决，说明原因

第一种：

     获取元素
     let lis = document.querySelectorAll('li')
     // 1.为所有里元素设置不同的背景图片
     lis.forEach(function (ele, index) {
       ele.style.backgroundImage = `url('./images/${index + 1}.jpg')`
       // 设置样式，让图片水平居中显示--方便
       ele.style.backgroundPosition = 'center'
       // 鼠标移入：当前图片的宽度边打，让其它的图片宽度变小
       ele.addEventListener('mouseenter', function () {
         //  让其它图片的宽度变为100
         lis.forEach(function (el, index) {
           el.style.width = 100 + 'px'
         })
         // 让当前图片的宽度变为800
         ele.style.width = 800 + 'px'
       })
       // 鼠标移除：所有图片的宽度还原为原始值
       ele.addEventListener('mouseleave', function () {
         //  让其它图片的宽度变为100
         lis.forEach(function (el, index) {
           el.style.width = 240 + 'px'
         })
       })
     })

第二种：

第二种需要改CSS样式添加flex

  * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      width: 1200px;
      /* 用flex做 */
      display: flex;
    }

    #box {

      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }

    #box li {
      /* 用flex做 */
      flex: 1;        

      width: 240px;
      height: 400px;
      /* border: 1px solid #000; */
      float: left;
      /* 过度 */
      transition: all 0.5s;
    }

 // 获取元素
    let lis = document.querySelectorAll('li')
    // 1.为所有里元素设置不同的背景图片
    lis.forEach(function (ele, index) {
      // 静态
      ele.style.backgroundImage = `url('./images/${index + 1}.jpg')`
      // 设置样式，让图片水平居中显示--方便
      ele.style.backgroundPosition = 'center'
      // 鼠标移入：当前图片的宽度边打，让其它的图片宽度变小
      ele.addEventListener('mouseenter', function () {
        ele.style.flex = 5
      
      })
      // 鼠标移除：所有图片的宽度还原为原始值
      ele.addEventListener('mouseleave', function () {
        ele.style.flex = 1
      
      })
    })

Webapi-案例（手风琴案例）

二：手风琴案例

第一种：

第二种：