原生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: 50px auto;
  }
  .panel-title {
  width: 100%;
  height: 68px;
  text-align: center;
  font: 600 18px/68px '微软雅黑';
  color: #fff;
  cursor: pointer;
  }
  .collapse {
  width: 100%;
  height: 0;
  background-color: #167EA0;
  overflow: hidden;
  }
  .collapse p {
  color: #fff;
  font: 500 16px '微软雅黑';
  text-indent: 2em;
  padding: 20px 20px 0 20px;
  }
  #One,#Tow,#Three{
  border-top: solid 1px #ccc;
  }
 </style>
 </head>
 <body>
 <div class="panel" id="panel">
 <h4 class="panel-title" id="panel-title">1 《抉择》</h4>
 <div class="collapse" id = "One"><p></p></div>
 <h4 class="panel-title" id="panel-title">2 《生命》</h4>
 <div class = "collapse" id="Tow"><p></p></div>
 <h4 class="panel-title" id="panel-title">3 《大小》</h4>
 <div class = "collapse" id="Three"><p></p></div>
 <h4 class="panel-title" id="panel-title">4 《崇拜》</h4>
 <div class = "collapse" id="Four"><p></p></div>
 </div>
 </body>
 <script>
 function animate(obj,json,endFn){
 //关闭上一个定时器
 clearInterval(obj.timer);
 //管理定时器
 obj.timer = setInterval(function(){
 //定时器开关 ,用来判断是否定时定时器
 var flag = true;
 //遍历json
 for(var arrt in json){
 //计算步长 步长 = 目标位置 - 当前位置
 var step = (json[arrt] - parseInt(getStyle(obj,arrt))) / 5;
 //步长取整
 step = step > 0 ? Math.ceil(step): Math.floor(step);
 //盒子移动: 盒子现在的位置 + 步长取整
 obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step + 'px';

 //只要其中一个不满足条件，就不停止定时器
 if(parseInt(getStyle(obj,arrt)) != json[arrt]){
 flag = false;
 }
 }
 //关闭定时器
 if(flag){
 clearInterval(obj.timer);
 //2秒后执行回调函数
 setTimeout(function(){
 //判断是否有回调函数，有endFn 再执行回调函数
 endFn&&endFn();
 },1000)
 }
 },20);
 }
 //获得现在的样式
 function getStyle(obj,arrt){
 //兼容ie
 return obj.currentStyle? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
 }
 var panel = document.getElementById("panel");
 var oH = panel.getElementsByTagName('h4');
 var oDiv = panel.getElementsByTagName('div');
 var str = ["人的一生常处于抉择之中，如：念哪一间大学？选哪一种职业？娶哪一种女子？……等等伤脑筋的事情。一个人抉择力的有无，可以显示其人格成熟与否。倒是哪些胸无主见的人，不受抉择之苦。因为逢到需要决定的时候，他总是求询别人说：'嘿，你看怎么做？'大凡能够成大功业的人，都是抉择力甚强的人。他知道事之成败，全在乎已没有人可以代劳，更没有人能代你决定。在抉择的哪一刻，成败实已露出端倪。","生命，也许是宇宙之间唯一应该受到崇拜的因素。生命的孕育、诞生和显示本质是一种无比激动人心的过程。生命像音乐和画面一样暗自挟带着一种命定的声调或血色，当它遇到大潮的袭卷，当它听到号角的催促时，它会顿时抖擞，露出本质的绚烂和激昂。当然，这本质更可能是卑污、懦弱、乏味的;它的主人并无选择的可能。应当承认，生命就是希望。应当说，卑鄙和庸俗不该得意过早，不该误认为它们已经成功地消灭了高尚和真纯。伪装也同样不能持久，因为时间像一条长河在滔滔冲刷，卑鄙者、奸商和俗棍不可能永远戴着教育家、诗人和战士的桂冠。在他们畅行无阻的生涯尽头，他们的后人将长久地感到羞辱。","一位朋友谈到他亲戚的姑婆，一生从来没有穿过合脚的鞋子，常穿着巨大的鞋子走来走去。儿子晚辈如果问她，她就会说：'大小鞋都是一样的价钱，为什么不买大的？'每次我转述这个故事，总有一些人笑得岔了气。其实，在生活里我们会看到很多这样的'姑婆'。没有什么思想的作家，偏偏写着厚重苦涩的作品;没有什么内容的画家，偏偏画着超级巨画;经常不在家的商人，却有非常巨大的家园。许多人不断地追求巨大，其实只是被内在贪欲推动着，就好像买了特大号的鞋子，忘了自己的脚一样。不管买什么鞋子，合脚最重要，不论追求什么，总要适可而止。","我崇拜高尚的生命的秘密。我崇拜这生命在降生、成长、战斗、伤残、牺牲时迸溅出的钢花焰火。我崇拜一个活灵灵的生命在崇山大河，在海洋和大陆上飘荡的自由。是的，生命就是希望。它飘荡无定，自由自在，它使人类中总有一支血脉不甘于失败，九死不悔地追寻着自己的金牧场。"];
 for(var i = 0;i<oH.length;i++){
 oH[i].index = i;
 oH[i].onclick = function(){
 for(var j = 0;j<oH.length; j++){
 animate(oDiv[j],{height:0});
 }
 if(parseInt(getStyle(oDiv[this.index],'height')) == 0){
 animate(oDiv[this.index],{height:210});
 oDiv[this.index].children[0].innerHTML = str[this.index];
 }else{
 animate(oDiv[this.index],{height:0});
 }
 }
 }
 </script>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

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

    原生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

  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • Angular.js与Bootstrap相结合实现手风琴菜单代码

    Angular.js与Bootstrap相结合实现手风琴菜单代码

    标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page

  • 纯js实现手风琴效果代码

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

  • 纯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实现带三角符的手风琴效果

    js实现带三角符的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #list{ width: 240px; border: 1px solid #666;

  • js实现可折叠展开的手风琴菜单效果

    js实现可折叠展开的手风琴菜单效果

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

  • 原生js实现手风琴功能（支持横纵向调用）

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q

  • js实现简单的手风琴效果

    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

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

随机推荐