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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
常用简易JavaScript函数
Apr 09 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
javascript版2048小游戏
Mar 18 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
简单实现js上传文件功能
Aug 21 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
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递归函数中使用return的注意事项
2014/01/17 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
python实现抖音视频批量下载
2018/06/20 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python 读取修改pcap包的例子
2019/07/23 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python中if有多个条件处理方法
2020/02/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
如何写你的创业计划书
2014/01/07 职场文书
大学毕业寄语大全
2014/04/10 职场文书
学党史心得体会
2014/09/05 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
vue+springboot实现登录验证码
2021/05/27 Vue.js
ant design charts 获取后端接口数据展示
2022/05/25 Javascript