Html5 js实现手风琴效果

2024-04-03 18:01:44

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生js做的手风琴效果的导航菜单

做好的手风琴效果如下,具体看代码: html代码复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir
炫酷的js手风琴效果

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不
纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
原生JS实现垂直手风琴效果

效果如下: 图 (1) 展开前图 (2) 展开后代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50
js以及jquery实现手风琴效果

最近又复习了jQuery的知识,既然jQuery是javascript的一个库.jQuery能做到的事情javascript也能做到.因此用这两种方法实现了图片手风琴效果. 按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!(^__^) 嘻嘻-- 先看一下javascript的代码吧: div布局:注意哦,里面的图片我们用js代码生成 <div id="box"> <ul> <li></li> <li></l
js实现简单的手风琴效果

效果图: 图(1)初始图图(2)点击展开效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s
纯js实现手风琴效果代码

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&
JS实现仿QQ面板的手风琴效果折叠菜单代码

本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!
JS实现的另类手风琴效果网页内容切换代码

本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
js实现可折叠展开的手风琴菜单效果

本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

Html5 js实现手风琴效果

相关推荐

随机推荐