Html5 js如何实现手风琴效果

发布时间:2020-08-03 09:54:10 作者:小猪
来源:亿速云 阅读:279

这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

<!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; 
 } 
 h4 { 
  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><h4>1</h4><img src="images/01.jpg" alt=""/></li> 
 <li><h4>2</h4><img src="images/02.jpg" alt=""/></li> 
 <li><h4>3</h4><img src="images/03.jpg" alt=""/></li> 
 <li><h4>4</h4><img src="images/04.jpg" alt=""/></li> 
 <li><h4>5</h4><img src="images/01.jpg" alt=""/></li> 
 <li><h4>6</h4><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> 

以上就是关于Html5 js如何实现手风琴效果的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。

推荐阅读:
  1. HTML5应用中accordion三种效果的探索
  2. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js html5

上一篇:jQuery如何实现简单的手风琴

下一篇:常见的Python面试题有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》