原生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 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
javascript 数组操作详解
2015/01/29 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
js常见遍历操作小结
2019/06/06 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python生成器的使用方法
2013/11/21 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python字符串Intern机制详解
2019/07/01 Python
Python二维码生成识别实例详解
2019/07/16 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
普天C++笔试题
2016/03/20 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
运动会方阵解说词
2014/02/12 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
创业计划书之家教中心
2019/09/25 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js