原生JS实现垂直手风琴效果


Posted in Javascript onFebruary 19, 2017

效果如下:

原生JS实现垂直手风琴效果

图 (1) 展开前

原生JS实现垂直手风琴效果

图 (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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
js鼠标移动时禁止选中文字
Feb 19 #Javascript
canvas雪花效果核心代码分享
Feb 19 #Javascript
Ajax和Comet技术总结
Feb 19 #Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
ext监听事件方法[初级篇]
2008/04/27 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python字典的常用方法总结
2019/07/31 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python 获取字典键值对的实现
2020/11/12 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
总账会计岗位职责
2014/03/13 职场文书
论文指导教师评语
2014/04/28 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL