Html5 js实现手风琴效果

使用H5实现横向的手风琴功能，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
 * { 
  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; 
 } 
 </style> 
</head> 
<body> 
<div> 
 <ul> 
 <li><h3>1</h3><img src="images/01.jpg" alt=""/></li> 
 <li><h3>2</h3><img src="images/02.jpg" alt=""/></li> 
 <li><h3>3</h3><img src="images/03.jpg" alt=""/></li> 
 <li><h3>4</h3><img src="images/04.jpg" alt=""/></li> 
 <li><h3>5</h3><img src="images/01.jpg" alt=""/></li> 
 <li><h3>6</h3><img class="img" src="images/02.jpg" alt=""/></li> 
 </ul> 
</div> 
 
<script> 
 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"; 
 } 
 } 
</script> 
</body> 
</html>

下载链接：H5实现手风琴

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

# js # 手风琴 # 纯js实现手风琴效果代码 # 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果 # js实现简单的手风琴效果 # 原生js做的手风琴效果的导航菜单 # Vue.js手风琴菜单组件开发实例 # js实现可折叠展开的手风琴菜单效果 # 纯js实现手风琴效果 # JS实现图片手风琴效果 # 原生JS实现垂直手风琴效果 # js实现简单手风琴效果 # 设置为 # 下载链接 # 具体内容 # 大家多多 # div # width # margin # title # style # padding # px # border # solid # red # auto # height # xhtml # lt # DOCTYPE # brush

返回目录在线咨询

上一篇：较难制作的网站软件有哪些,零基础入门网页编程，有哪些好用的软件？
下一篇：C#中的nameof表达式有什么妙用？提升C#代码可读性和可维护性的小技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Html5 js实现手风琴效果

您的项目需求