原生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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
JS验证字符串功能
Feb 22 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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中的加密功能
2006/10/09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python hashlib加密实现代码
2019/10/17 Python
Python接收手机短信的代码整理
2020/08/02 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
司机辞职报告范文
2014/01/20 职场文书
临时租车协议范本
2014/09/23 职场文书
2015年健康教育工作总结
2015/04/10 职场文书