欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html5 js實現(xiàn)手風琴效果

 更新時間：2020年04月17日 16:12:33   作者：安靜的對折  
這篇文章主要為大家詳細介紹了Html5 js實現(xiàn)手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用H5實現(xiàn)橫向的手風琴功能，供大家參考，具體內(nèi)容如下

<!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實現(xiàn)手風琴

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論