Html5 js实现手风琴效果
更新时间：2020年04月17日 16:12:33 作者：安静的对折
这篇文章主要为大家详细介绍了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实现手风琴
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
typeof 在js中typeof是检查类型的,在ts中也有这个功能,下面这篇文章主要给大家介绍了关于TypeScript基本类型之typeof和keyof的相关资料,需要的朋友可以参考下2023-04-04
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
这篇文章主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧2016-11-11
这篇文章主要介绍了JavaScript 判断浏览器是否是IE，帮助大家更好的理解和学习前端知识，感兴趣的朋友可以了解下2021-02-02
用js来生成随机彩票号码清单...2007-02-02
这篇文章主要为大家详细介绍了微信小程序用canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
跟我学习javascript的prototype,getPrototypeOf和__proto__
跟我学习javascript的prototype,getPrototypeOf和__proto__，深入学习了三个用来访问prototype的方法，感兴趣的小伙伴们可以参考一下2015-11-11
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)
这篇文章主要介绍了基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)的相关资料,需要的朋友可以参考下2016-07-07
似乎某些程序员的集合是不相交的，就好像JS程序员和玩编译原理和CPU指令的汇编程序员就几乎没有交叉。前些日子讨论的火热的“作用域链”问题，说白了就是寻址问题，不过，这个在C中十分简单的问题却被JS这个动态语言弄得很复杂。2009-04-04
这篇文章主要介绍了JS变量提升,结合实例形式分析了JS变量提升基本概念、功能、原理、用法及相关注意事项,需要的朋友可以参考下2020-05-05
由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。 JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展2009-07-07
最新评论