手风琴案例

重点

1.获取计算后样式函数
2.封装的变速移动函数
3.获取加载图片
4.添加鼠标进入事件
5.添加鼠标移出事件

效果图

素材

案例代码

Css

ul {
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

div {
  width: 1150px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid red;
  overflow: hidden;
}

div li {
  width: 240px;
  height: 400px;
  float: left;
}

div ul {
  width: 1300px;
}

Html

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

Js

  let li = document.querySelectorAll("li");

// 封装的函数
// 判断浏览器是否自持方法，得到css返回值
function getStyle(element, attr) {
  //判断浏览器是否支持这个方法
  return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

// 封装点击事件移动函数
//设置任意的一个元素,移动到指定的目标位置
function fn(element, json, fn1) {
  clearInterval(element.timeId);
  //定时器的id值存储到对象的一个属性中
  element.timeId = setInterval(function () {
    var flag = true; //判断目标到达
    for (const attr in json) {
      //判断这个属性attr中是不是opacity
      if (attr == "opacity") {
        //获取元素的当前的透明度，放大一百倍
        var current = getStyle(element, attr) * 100;
        // 当前属性对应的目标值,放大一百倍
        var target = json[attr] * 100;
        //每次移动的距离
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
        current += step;
        element.style[attr] = current / 100;
      } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
        element.style[attr] = json[attr];

      } else {
        //获取元素的当前的位置,数字类型
        var current = parseInt(getStyle(element, attr));
        // 当前属性对应的目标值
        var target = json[attr];
        //每次移动的距离
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
        current += step;
        element.style[attr] = current + "px";
      }

      if (current != target) {
        flag = false;
      }
    }
    if (flag) {
      //清理定时器
      clearInterval(element.timeId);
      // 所有属性到达目标后才能使用，并且用户有输入函数
      if (fn1) {
        fn1();
      }
    }
  }, 20);
}


// 加载图片
for (let i = 0; i < li.length; i++) {
  li[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

  // 鼠标进入
  li[i].onmouseover = fn1;

  // 鼠标离开
  li[i].onmouseout = fn2;

  function fn1() {
    for (let j = 0; j < li.length; j++) {
      fn(li[j], {
        "width": 100
      }); //动画效果
    }
    fn(this, {
      "width": 800
    })
  }

  function fn2() {
    for (let j = 0; j < li.length; j++) {
      fn(li[j], {
        "width": 235
      }); //动画效果 
      }
    }
  }