返回 Html5 j...... 登陆

Html5 js实现手风琴效果

巴扎黑 2017-01-14 11:33:47 1642

使用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>

 更多关于Html5 js实现手风琴效果请关注PHP中文网(www.php.cn)其他文章!

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(1)我要回复

  • PHPz

    PHPz2017-02-22 10:35:38

    手风琴特效代码下载http://www.php.cn/xiazai/js/shoufengqin

  • 取消 回复 发送
  • PHP中文网