Html5 js实现手风琴效果


Posted in Javascript onApril 17, 2020

使用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实现手风琴

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
JavaScript验证知识整理
Mar 24 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
jQuery.parseHTML() 函数详解
Jan 09 #Javascript
微信小程序 用户数据解密详细介绍
Jan 09 #Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 #Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 #Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 #Javascript
You might like
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
jquery判断浏览器类型的代码
2012/11/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
python 异常处理总结
2016/10/18 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
PHP如何删除一个Cookie值
2012/11/15 面试题
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
应届护士求职信范文
2014/01/26 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
机械专业求职信
2014/05/25 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
护士2014年终工作总结
2014/11/11 职场文书
数学教师个人总结
2015/02/06 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
详解Django的MVT设计模式
2021/04/29 Python