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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript+CSS+HTML 编写手风琴效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2282字，纯文字阅读大概需要4分钟。

内容图文

效果图：

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

 代码如下：

* {
  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;
}

<div class="container">
  <div class="wrapper">
    <div class="title">这是标题1</div>
    <img class="inner" src="http://a.hiphotos.baidu.com/zhidao/pic/item/7c1ed21b0ef41bd5a5ea166a53da81cb38db3df6.jpg"
      alt="">
  </div>
  <div class="wrapper">
    <div class="title">这是标题2</div>
    <img class="inner" src="http://e.hiphotos.baidu.com/zhidao/pic/item/9d82d158ccbf6c81ec5127f8bc3eb13533fa40bf.jpg"
      alt="">
  </div>
  <div class="wrapper">
    <div class="title">这是标题3</div>
    <img class="inner" src="http://dl.ppt123.net/pptbj/201603/2016030410213428.jpg" alt="">
  </div>
  <div class="wrapper">
    <div class="title">这是标题4</div>
    <img class="inner" src="http://1824.img.pp.sohu.com.cn/images/2008/6/5/13/17/11af6fc767c.jpg" alt="">
  </div>
  <div class="wrapper">
    <div class="title">这是标题5</div>
    <img class="inner" src="http://pic1.win4000.com/wallpaper/3/53ad42e6acb5d.jpg" alt="">
  </div>
</div>

// 各容器
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';
  }
}

内容总结

以上是互联网集市为您收集整理的JavaScript+CSS+HTML 编写手风琴效果全部内容，希望文章能够帮你解决JavaScript+CSS+HTML 编写手风琴效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端