使用Html5实现手风琴案例

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

HTML

 !DOCTYPE htML>
       html>
       head lang="en">
           meta charset="UTF-8">
           tITle>
    /title>
     /head>
       body>
       p>
           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>
       /p>
     /body>
       /html>
  

CSS

 * {
      padding: 0;
      margin: 0;
 }
  p {
      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;
 }
      

JavaScript

 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实现横向的手风琴功能

HTML

 !DOCTYPE html>
       html>
       head lang="en">
           meta charset="UTF-8">
           title>
    /title>
     /head>
       body>
       p>
           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>
       /p>
     /body>
       /html>
  

CSS

 * {
      padding: 0;
      margin: 0;
 }
  p {
      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;
 }
      

JavaScript

 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";
     }
 }
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！