html相册滑动手风琴效果实现,Html5 js实现手风琴效果

使用H5实现横向的手风琴功能

* {

padding: 0;

margin: 0;

}

div {

width: 522px;

height: 222px;

margin: 50px auto;

border: 1px solid red;

box-sizing: border-box;

box-sizing: border-box;

}

ul {

overflow: hidden;

height: 222px;

}

li {

float: left;

height: 222px;

list-style: none;

box-sizing: border-box;

}

h3 {

width: 50px;

float: left;

height: 222px;

border: 1px solid green;

box-sizing: border-box;

}

img {

width: 0px;

float: left;

}

.img {

width: 220px;

}

• 1

  

• 2

  

• 3

  

• 4

  

• 5

  

• 6

  

var lis = document.querySelectorAll("li");

var imgs = document.querySelectorAll("img");

for(var i = 0; i < lis.length; i++) {

//给所有的li标签添加点击事件

lis[i].onclick = function () {

//将所有的图片宽度设置为0

for(var i = 0; i < lis.length; i++) {

imgs[i].style.width = "0px";

}

//将当前点击li标签中的img标签设置宽度为220px

this.querySelector("img").style.width = "220px";

}

}

下载链接：H5实现手风琴

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2017-01-09