JavaScript+CSS+HTML 编写手风琴效果

效果图：

 

可以通过 https://littlehiuman.github.io/03-Accordion/ 查看效果。

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

 

 代码如下：

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 520px;
  height: 400px;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  height: 100%;
  top: 0;
  overflow: hidden;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  bottom: 0;
}

  

    
这是标题1
    
  
  

    
这是标题2
    
  
  

    
这是标题3
    
  
  

    
这是标题4
    
  
  

    
这是标题5
    
  

// 各容器
var container = document.getElementsByClassName('container')[0];
var wrappers = document.getElementsByClassName('wrapper');
var inners = document.getElementsByClassName('inner');
// 设定宽高
var width = 520;
var height = container.getBoundingClientRect().height;
var eachWidth = width / wrappers.length;
container.style.width = (width + eachWidth * (wrappers.length - 1)) + 'px';
// 设定索引
var index = 0;
// 给图片加宽度以及给容器添加鼠标事件
init();
// 修改容器的left和width
loadImg();
// 函数
function init() {
  for (var i = 0; i < wrappers.length; i++) {
    inners[i].style.width = width + 'px';
    wrappers[i]['data-index'] = i;
    wrappers[i].onmouseenter = function () {
      if (index === this['data-index']) return;
      index = this['data-index'];
      loadImg();
    }
  }
}
function loadImg() {
  for (var i = 0; i < wrappers.length; i++) {
    wrappers[i].style.width = i == index ? width + 'px' : eachWidth + 'px';
    wrappers[i].style.left = i > index ? (width + eachWidth * (i - 1)) + 'px' : (eachWidth * i) + 'px';
  }
}