JS实现动画特效5(实现手风琴特效2）

实现效果

代码

html

<!-- 手风琴特效S -->
<div class="wrap" id="wrap">
  <h1>手风琴特效</h1>
  <div class="slide" id="slide">
    <ul>
      <li><a href=""><img src="img/1.jpg" alt=""></a></li>
      <li><a href=""><img src="img/2.jpg" alt=""></a></li>
      <li><a href=""><img src="img/3.jpg" alt=""></a></li>
      <li><a href=""><img src="img/4.jpg" alt=""></a></li>
      <li><a href=""><img src="img/5.jpg" alt=""></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:" id="next"></a>
      <a href="javascript:" id="prev"></a>
    </div>
  </div>
</div>
<!-- 手风琴特效E -->

css

/* 手风琴特效S */
.warp {
  width: 1000px;
  margin: 10px auto;
  border: 1px solid red;
}

.slide {
  height: 200px;
  margin: 100px auto;
  position: relative;
}

.slide li {
  position: absolute;
  left: 200px;
  top: 0;
}

.slide li img {
  width: 100%;
  border: 0;
  vertical-align: top;
}

ul {
  list-style: none;
}

.arrow {
  opacity: 0;
}

.prev,
.next {
  width: 76px;
  height: 112px;
  position: absolute;
  top: 50%;
  margin-top: -56px;
  z-index: 999;
}

.next {
  right: 0;
}



.wrap {
  margin: 150px auto;
  width: 1200px;
}

.wrap h1 {
  margin-top: 30px;
}

.slide {
  height: 500px;
  position: relative;
}

.slide li {
  position: absolute;
  left: 200px;
  top: 0;
}

.slide li img {
  width: 100%;
}

.arrow {
  opacity: 0;
}

#next,
#prev {
  width: 76px;
  height: 112px;
  position: absolute;
  top: 50%;
  margin-top: -56px;
  background: url("../img/prev.jpg") no-repeat;
  z-index: 99;
}

#next {
  background-image: url("../img/next.jpg");
  right: 0;
}

/* 手风琴特效E */

js

/ 手风琴特效S
function my$(id) {
  return document.getElementById(id);
}
/*
 * element---任意的元素
 * attr---属性
 * */
function getAttrValue(element, attr) {
  return element.currentStyle
    ? element.currentStyle[attr]
    : window.getComputedStyle(element, null)[attr] || 0;
}
//动画函数
function animate(element, json, fn) {
  clearInterval(element.timeId);
  element.timeId = setInterval(function () {
    var flag = true; //假设都达到了目标
    for (var attr in json) {
      if (attr == "opacity") {
        //判断属性是不是opacity
        var current = getAttrValue(element, attr) * 100;
        //每次移动多少步
        var target = json[attr] * 100; //直接赋值给一个变量,后面的代码都不用改
        var step = (target - current) / 10; //(目标-当前)/10
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current = current + step;
        element.style[attr] = current / 100;
      } else if (attr == "zIndex") {
        //判断属性是不是zIndex
        element.style[attr] = json[attr];
      } else {
        //普通的属性

        //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
        var current = parseInt(getAttrValue(element, attr)) || 0;
        //每次移动多少步
        var target = json[attr]; //直接赋值给一个变量,后面的代码都不用改
        var step = (target - current) / 10; //(目标-当前)/10
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current = current + step;
        element.style[attr] = current + "px";
      }
      if (current != target) {
        flag = false; //如果没到目标结果就为false
      }
    }
    if (flag) {
      //结果为true
      clearInterval(element.timeId);
      if (fn) {
        //如果用户传入了回调的函数
        fn(); //就直接的调用,
      }
    }
    console.log("target:" + target + "current:" + current + "step:" + step);
  }, 10);
}

var config = [
  {
    width: 400,
    opacity: 0.2,
    height: 250,
    left: 50,
    top: 20,
    zIndex: 2,
  }, //0
  {
    width: 600,
    opacity: 0.7,
    height: 350,
    left: 0,
    top: 70,
    zIndex: 3,
  }, //1
  {
    width: 800,
    opacity: 1,
    height: 500,
    left: 200,
    top: 100,
    zIndex: 4,
  }, //2
  {
    width: 600,
    opacity: 0.7,
    height: 350,
    left: 600,
    top: 70,
    zIndex: 3,
  }, //3
  {
    width: 400,
    opacity: 0.2,
    height: 250,
    left: 750,
    top: 20,
    zIndex: 2,
  }, //4
];
//页面加载事件
window.onload = function () {
  var flag = true; //默认所有的动画都结束了
  //获取li标签
  var list = my$("slide").getElementsByTagName("li");
  //散开图片
  function assign() {
    for (var i = 0; i < list.length; i++) {
      animate(list[i], config[i], function () {
        flag = true; //回调函数，当动画加载完后，flag变为true
      });
    }
  }
  assign();
  //点击右边焦点
  my$("next").onclick = function () {
    if (flag) {
      flag = false;
      config.push(config.shift()); //把数组中的第一个元素作为返回值并追加加到这个数组的最后面
      assign();
    }
  };
  //点击左边焦点
  my$("prev").onclick = function () {
    if (flag) {
      flag = false;
      config.unshift(config.pop()); //把数组的最后一个元素作为返回值并追加到这个数组的最前面
      assign();
    }
  };
  //鼠标进入逐渐的显示左右焦点
  my$("slide").onmouseover = function () {
    animate(my$("arrow"), { opacity: 1 });
  };
  //鼠标离开隐藏
  my$("slide").onmouseout = function () {
    animate(my$("arrow"), { opacity: 0 });
  };
};
// 手风琴特效E