JS手风琴双开门案例

效果展示：

分析步骤：

• 静态结构动态渲染

  • 背景样式：背景样式可以设置图片居中显示

• 鼠标移入：当前图片的宽度变大，其它的图片的宽度变小

• 鼠标移出：所有图片的宽度还原为原始值

html代码：

 <div id="box">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

css代码：

<style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
        width: 1300px;
      }

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

      #box li {
        width: 240px;
        height: 400px;
        /* border: 1px solid #000; */
        float: left;
        transition: all 1s;
      }
    </style>

JS代码：

完善结构

let lis = document.querySelectorAll('li')
// 1.为所有li元素设置不同的背景图片
lis.forEach(function(ele, index) {
    ele.style.backgroundImage = `url("./images/${index + 1}.jpg")`
    // 设置样式，让图片水平居中显示-- 方便
    ele.style.backgroundPosition = 'center'
})

功能实现

let lis = document.querySelectorAll('li')
// 1.为所有li元素设置不同的背景图片
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() {
        lis.forEach(function(el, index) {
            el.style.width = 240 + 'px'
        })
    })
})

这个代码有个bug

移到快的话右边会有空白部分出来

这里也可以用flex方法实现功能

flex不会有那个bug

 <script>
      let lis=document.querySelectorAll(`li`)
      // 为所有li设置不同的背景图片
      lis.forEach(function(ele,index){
        ele.style.backgroundImage=`url(./images/${index+1}.jpg)`
        // 让背景图片居中
        ele.style.backgroundPosition= `center`
        // ele.style.transition=`1s`
        ele.addEventListener(`mouseenter`,function(){
         ele.style.flex=5
            })
            ele.addEventListener(`mouseleave`,function(){
               ele.style.flex = 1
            })
      })
    </script>