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 相关文章推荐
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
浅析node.js的模块加载机制
May 25 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
微信小程序实现拼图小游戏
Oct 22 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
用 JSON 处理缓存
2007/04/27 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python入门篇之条件、循环
2014/10/17 Python
Python中title()方法的使用简介
2015/05/20 Python
python中正则的使用指南
2016/12/04 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
中医专业应届生求职信
2013/11/17 职场文书
会计自荐信范文
2014/03/09 职场文书
技能比武方案
2014/05/21 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
领导工作表现评语
2015/01/04 职场文书
入伍通知书
2015/04/23 职场文书
二手房购房意向书
2015/05/09 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS