【JavaScript】简易小米手风琴案例

首选，我们在拿到案例的时候，要了解清楚案例的实现的步骤，大致需要用到效果、样式等等。。。

其次，我们还要考虑案例在运行中的所产生的bug，这就要我们好好的处理好这些细节的问题。

分析：

• 静态结构动态渲染

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

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

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

• 效果的优化：仔细解决，能说明原因

最终实现的效果

结构

//css样式
 <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        display: flex;
        list-style: none;
        width: 1200px;
      }

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

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

	//空结构
		<div id="box">
		      <ul>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		      </ul>
		    </div>

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'
})

js功能的实现–1

	
        // 鼠标移入：当前图片的宽度变大，其他的图片的宽度变小
        ele.addEventListener('mouseenter',function(){
          lis.forEach(function(el,index){
            // 让其他图片的宽度变为100
            el.style.width = 100 +'px'
          })
          // 让当前图片的宽度变为800
          ele.style.width = 800 + 'px'
        })
        // 鼠标移出：所有的宽度还原为原始值
          ele.addEventListener('mouerleave',function(){
          lis.forEach(function(el,index){
            el.style.width = 240 + 'px'
          })
        })

以上的 js功能的实现–1，当你在运行时会发现，滑动图片实现来回展示时，后面的边框上会出现较明显的空白面（快操作），这是因为你在想展示某张图片时，要它马上实现宽度的放大，而其他的图片“反应”的时间较快产生的。所以下面的js–2使用了flex来操作，可以实现完美的避免这种情况的产生。

js功能的实现–2

		// 鼠标移入：当前图片的宽度变大，其他的图片的宽度变小
        ele.addEventListener('mouseenter',function(){
            ele.style.flex = 8
          })
          // 当鼠标移出，图片恢复原来比例宽度
        ele.addEventListener('mouseleave',function(){
          ele.style.flex = 1
        })