[JavaScript知识库]jQuery简单手风琴

首先引入需要的资源

? <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js"></script>

? <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">

结构是li里两张图 一大一小 默认 大的不显示 小的显示

鼠标经过某个li 时有两步操作

当前li宽度变大 小图片淡出 大图片淡入

其他兄弟li 宽度变小 大图片淡出 小图片淡入

这里用到的是同一张图片为背景图片

HTML结构：

<ul>
  <li style="width: 300px">
    <div class="smallImg" style="display: none"></div>
    <div class="bigImg" style="display: block"></div>
  </li>
  <li>
    <div class="smallImg"></div>
    <div class="bigImg"></div>
  </li>
  <li>
    <div class="smallImg"></div>
    <div class="bigImg"></div>
  </li>
  <li>
    <div class="smallImg"></div>
    <div class="bigImg"></div>
  </li>
  <li>
    <div class="smallImg"></div>
    <div class="bigImg"></div>
  </li>
  <li>
    <div class="smallImg"></div>
    <div class="bigImg"></div>
  </li>
</ul>

JS逻辑：

先定义图片链接

找到所有装大图片盒子 和 小图片的盒子 进行对应的数据填充

鼠标移入时处理响应事件

使用链式编程写法? 在动画后衔接stop 防止出现抖动

$(function () {
     let imgUrl = [
       'https://image.zhongxin5.cn/_newsystem/course/2022/1/11/202211115853949150958.jpg',
       'https://image.zhongxin5.cn/_newsystem/course/2022/1/11/202211115931917160627.jpg',
       'https://image.zhongxin5.cn/_newsystem/course/2022/1/11/2022111151015433123249.jpg',
       'https://image.zhongxin5.cn/_newsystem/course/2022/2/17/202221795012874113543.jpg',
       'https://image.zhongxin5.cn/_newsystem/course/2022/2/28/2022228143958798123252.jpg',
       'https://image.zhongxin5.cn/_newsystem/course/2022/1/11/2022111151227450205476.jpg'
     ]

    $('.smallImg').each(function (i,domEle) {
      $(domEle).css({
        background:'url(' +imgUrl[i] +') right no-repeat',
        backgroundSize:'cover'
      })
    })

    $('.bigImg').each(function (i,domEle) {
      $(domEle).css({
        background:'url(' +imgUrl[i] +') center no-repeat',
        backgroundSize:'cover'
      })
    })


    $('ul>li').mouseenter(function () {
        $(this).stop().animate({
          width:'300px'
        },200).find('.smallImg').stop().fadeOut(120).siblings('.bigImg').stop().fadeIn(120)

      $(this).siblings('li').stop().animate({
        width: '180px'
      },200).find('.smallImg').stop().fadeIn(120).siblings('.bigImg').stop().fadeOut(120)
    })

  })

CSS样式：

    .bigImg{
      display: none;
      width: 300px;
      height: 180px;
    }

    .smallImg{
      width: 180px;
      height: 180px;
      position: absolute;
      left: 0;
      top: 0;
    }

    ul{
      clear: both;
      width: 1444px;
      height: 180px;
      margin: 40px auto;
      overflow: hidden;
    }

    li{
      width: 180px;
      float: left;
      height: 180px;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }