当前位置: 首页 > 编程笔记 >

Html5 js实现手风琴效果

孟福
2023-03-14
本文向大家介绍Html5 js实现手风琴效果,包括了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实现手风琴

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍JavaScript实现手风琴效果,包括了JavaScript实现手风琴效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现手风琴效果的具体代码,供大家参考,具体内容如下 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS实现手风琴特效,包括了JS实现手风琴特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现手风琴特效的具体代码,供大家参考,具体内容如下 效果图 JS代码 CSS代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍简单实现jQuery手风琴效果,包括了简单实现jQuery手风琴效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下 js代码: css代码: html代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS实现图片手风琴效果,包括了JS实现图片手风琴效果的使用技巧和注意事项,需要的朋友参考一下 ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。 推拉门收缩状态.png "推拉门"展开状态.png "推拉门"实现方法一:改变图片宽度 html+css代

  • 本文向大家介绍纯js实现手风琴效果代码,包括了纯js实现手风琴效果代码的使用技巧和注意事项,需要的朋友参考一下 我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果。  HTML代码如下 

  • 本文向大家介绍js实现简单的手风琴效果,包括了js实现简单的手风琴效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 图(1)初始图 图(2)点击展开效果 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!