首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 13, 2017

话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>手风琴-支持横纵向调用-原生js封装</title>
 <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
 <link rel="icon" href="../public/image/favicon.png" type="images/png"/>
 <link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
 <link rel="stylesheet" type="text/css" href="../public/style/common.css">
 <style type="text/css">
 /*公共*/
 html{
  height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
 }
 ol, ul {
  list-style: none
 }
 body{
  position: relative;
  min-height:100%;
  font-size:14px;
  font-family: Tahoma, Verdana,"Microsoft Yahei";
  color:#333;
 }
 a{
  text-decoration: none;
  color:#333;
 }
 .header{
  width: 960px;
  padding-top: 15px;
  margin: 0 auto;
  line-height: 30px;
  text-align: right;
 }
 .header a{
  margin: 0 5px;
 }
 .main{
  width:960px;
  margin: 50px auto 0;
 }
 .code{
  border:1px dashed #e2e2e2;
  padding:10px 5px;
  margin-bottom:25px;
 }
 pre {
  font-family: "Microsoft Yahei",Arial,Helvetica;
  white-space: pre-wrap; /*css-3*/ 
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
  white-space: -pre-wrap; /*Opera4-6*/ 
  white-space: -o-pre-wrap; /*Opera7*/ 
  word-wrap: break-word; /*InternetExplorer5.5+*/
 }
 .example{
  padding-top:40px;
  margin-bottom:90px;
 }
 .example .call{
  padding:18px 5px;
  background:#f0f5f8;
 }
 .example h2{
  padding-top:20px;
  margin-bottom:7px;
 }
 .example table {
  width:100%;
  table-layout:fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #cee1ee;
  border-left: 0;
 }
 .example thead {
  border-bottom: 1px solid #cee1ee;
  background-color: #e3eef8;
 }
 .example tr {
  line-height: 24px;
  font-size: 13px;
 }
 .example tr:nth-child(2n) {
  background-color: #f0f5f8;
 }
 .example tr th,.example tr td {
  border-left: 1px solid #cee1ee;
  word-break: break-all;
  word-wrap: break-word;
  padding:0 10px;
  font-weight: normal;
 }
 .example tr th {
  color: #555;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: left;
 }
 /*公共*/
 .accordion-container {
  height: 200px;
  margin: 20px auto;
  /*border: 1px solid #ccc;*/
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  position: relative;
 }
 .accordion-list{
  position: absolute;
  left: 0;
  width: 150px;
  border-left: 1px solid #ccc;
  height: 100%;
  /*-webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -o-transition: all .1s linear;
  -ms-transition: all .1s linear;
  transition: all .1s linear;*/
 }
 /*.accordion-container li:last-child{
  border:none;
 }*/
 .accordion-container2{
  width: 500px;
  border-top:none;
 }
 .accordion-container2 .accordion-list{
  width: 100%;
  height: 100px;
  border-top: 1px solid #ccc;
 }
 </style>
 <script type="text/javascript">
 /*封装代码*/
 (function() {
  var Accordion = function(el, opts) {
  var self = this;
  var defaults = {
   direction: "x",
   expose: 30,
   speed: 30
  }
  opts = opts || {};
  for (var w in defaults) {
   if ("undefined" == typeof opts[w]) {
   opts[w] = defaults[w];
   }
  }
  this.params = opts;
  this.container = r(el);
  if (this.container.length > 1) {
   var x = [];
   return this.container.each(function() {
   x.push(new Accordion(this, opts))
   }), x
  }
  this.containers = this.container[0]; //容器对象
  this.list = this.container.find(".accordion-list"); //获得NodeList对象集合
  this.exposeSize = this.params.expose; //设置掩藏门体露出的宽度
  this.init();
  }
  Accordion.prototype = {
  //初始化
  init: function() {
   var self = this;
   //设置容器总宽度
   if (this.params.direction == 'x') {
   this.direction = 'left';
   this.listSize = this.list[0].offsetWidth;
   this.translate = this.listSize - this.exposeSize;
   } else if (this.params.direction == 'y') {
   this.direction = 'top';
   this.listSize = this.list[0].offsetHeight;
   this.translate = this.listSize - this.exposeSize;
   }
   this.conwidth();
   //设置每道门的初始位置
   this.setlistPos();
   //绑定事件
   this.event();
  },
  //设置容器总宽度
  conwidth: function() {
   var boxWidth = this.listSize + (this.list.length - 1) * this.exposeSize;
   if (this.params.direction == 'x') {
   this.containers.style.width = boxWidth + 'px';
   } else if (this.params.direction == 'y') {
   this.containers.style.height = boxWidth + 'px';
   }
  },
  //设置每道门的初始位置
  setlistPos: function() {
   for (var i = 1, len = this.list.length; i < len; i++) {
   this.list[i].style[this.direction] = this.listSize + this.exposeSize * (i - 1) + 'px';
   }
  },
  //绑定事件
  event: function() {
   var self = this;
   for (var i = 0; i < this.list.length; i++) {
   (function(i) {
    self.list[i].addEventListener('click', function() {
    self.setlistPos();
    for (var j = 1; j <= i; j++) {
     starmove(self.list[j], {
     [self.direction]: parseInt(self.list[j].style[self.direction]) - self.translate
     }, self.params.speed)
    }
    }, false);
   })(i)
   }
  }
  }
  function starmove(obj, json, time, fn) {
  var fn, times;
  if (arguments[2] == undefined) {
   times = 30;
  } else if (typeof time == "function") {
   times = 30;
   fn = time;
  } else if (typeof time == "number") {
   times = time;
  }
  if (arguments[3]) {
   fn = fn;
  }
  clearInterval(obj.zzz);
  obj.zzz = setInterval(function() {
   var flag = true;
   for (var attr in json) {
   var icur = 0;
   if (attr == 'opacity') {
    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
    icur = parseInt(getStyle(obj, attr));
   }
   var speed = (json[attr] - icur) / 8;
   speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
   if (icur != json[attr]) {
    flag = false;
   }
   if (attr == 'opacity') {
    icur += speed;
    obj.style.filter = 'alpha(opacity:' + icur + ')';
    obj.style.opacity = icur / 100;
   } else {
    obj.style[attr] = icur + speed + 'px';
   }
   }
   if (flag) {
   clearInterval(obj.zzz);
   if (fn) {
    fn();
   }
   }
  }, times)
  }
  function getStyle(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
  var r = (function() {
  var e = function(e) {
   var a = this,
   t = 0;
   for (t = 0; t < e.length; t++) {
   a[t] = e[t];
   }
   return a.length = e.length, this
  };
  e.prototype = {
   addClass: function(e) {
   if ("undefined" == typeof e) return this;
   for (var a = e.split(" "), t = 0; t < a.length; t++)
    for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
   return this
   },
   each: function(e) {
   for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
   return this
   },
   html: function(e) {
   if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
   for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
   return this
   },
   find: function(a) {
   for (var t = [], r = 0; r < this.length; r++)
    for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
   return new e(t)
   },
   append: function(a) {
   var t, r;
   for (t = 0; t < this.length; t++)
    if ("string" == typeof a) {
    var i = document.createElement("div");
    for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
    } else if (a instanceof e)
    for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);
   else this[t].appendChild(a);
   return this
   },
  }
  var a = function(a, t) {
   var r = [],
   i = 0;
   if (a && !t && a instanceof e) {
   return a;
   }
   if (a) {
   if ("string" == typeof a) {
    var s, n, o = a.trim();
    if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {
    var l = "div";
    for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createElement(l), n.innerHTML = a, i = 0; i < n.childNodes.length; i++) r.push(n.childNodes[i])
    } else
    for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])
   } else if (a.nodeType || a === window || a === document) {
    r.push(a);
   } else if (a.length > 0 && a[0].nodeType) {
    for (i = 0; i < a.length; i++) {
    r.push(a[i]);
    }
   }
   }
   return new e(r)
  };
  return a;
  }())
  window.accordion = Accordion;
 })()
 /*封装代码*/
 </script>
</head>
<body>
 <div class="header">
 <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
 <a href="/widget/">返回首页</a>
 </div>
 <div class="main">
 <div class="accordion-container" id="accordion">
  <ul>
  <li class="accordion-list">1</li>
  <li class="accordion-list">2</li>
  <li class="accordion-list">3</li>
  <li class="accordion-list">4</li>
  <li class="accordion-list">5</li>
  </ul>
 </div>
 <script type="text/javascript">
  new accordion("#accordion");
 </script>
 <div class="code">
  <p>
  不传参数，执行默认参数，鼠标点击预览图切换
  </p>
  <p>new accordion("#accordion");</p>
 </div>
 <div class="accordion-container" id="accordion1">
  <ul>
  <li class="accordion-list">1</li>
  <li class="accordion-list">2</li>
  <li class="accordion-list">3</li>
  <li class="accordion-list">4</li>
  <li class="accordion-list">5</li>
  </ul>
 </div>
 <script type="text/javascript">
  new accordion("#accordion1", {
  direction: "x",
  expose: 50
  });
 </script>
 <div class="code">
  <p>
  执行默认参数，设置横向展开{direction: "x"}，设置隐藏体可是区大小{expose: 50}默认单位为px，鼠标点击预览图切换
  </p>
  <p>new accordion("#accordion1", {
  direction: "x",
  expose: 50
  });</p>
 </div>
 <div class="accordion-container accordion-container2" id="accordion2">
  <ul>
  <li class="accordion-list">1</li>
  <li class="accordion-list">2</li>
  <li class="accordion-list">3</li>
  <li class="accordion-list">4</li>
  <li class="accordion-list">5</li>
  <li class="accordion-list">6</li>
  </ul>
 </div>
 <script type="text/javascript">
  new accordion("#accordion2", {
  direction: "y",
  expose: 30
  });
 </script>
 <div class="code">
  <p>
  执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，鼠标点击预览图切换
  </p>
  <p>new accordion("#accordion2", {
  direction: "y",
  expose: 30
  });</p>
 </div>
 <div class="accordion-container accordion-container2" id="accordion3">
  <ul>
  <li class="accordion-list">1</li>
  <li class="accordion-list">2</li>
  <li class="accordion-list">3</li>
  <li class="accordion-list">4</li>
  </ul>
 </div>
 <script type="text/javascript">
  new accordion("#accordion3", {
  direction: "y",
  expose: 30,
  speed: 100
  });
 </script>
 <div class="code">
  <p>
  执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，设置运动速度{speed: 100}，鼠标点击预览图切换
  </p>
  <p>new accordion("#accordion3", {
  direction: "y",
  expose: 30,
  speed: 100
  });</p>
 </div>
 <div class="example">
  <div class="call">
  <h1>调用方法：</h1>
  <p>new accordion(selector,{options});</p>
  </div>
  <h2>options参数</h2>
  <table>
  <thead>
   <tr>
   <th width="150">参数</th>
   <th width="100">默认值</th>
   <th>说明</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>direction</td>
   <td>"x"</td>
   <td>设置横向展开{direction: "x"},设置纵向展开{direction: "y"}</td>
   </tr>
   <tr>
   <td>expose</td>
   <td>30</td>
   <td>设置隐藏体可是区大小{expose: 30}默认单位为px</td>
   </tr>
   <tr>
   <td>speed</td>
   <td>30</td>
   <td>设置运动速度{speed: 100}</td>
   </tr>
  </tbody>
  </table>
 </div>
 </div>
</body>
</html>

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

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

- Author -

继小鹏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
微信小程序 Page（）函数详解
Oct 17 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
Yolov5(1) TimePickerView(1) vue-router-link(1) 监听(2) vue-cli3.x(1) sched(1) watch(1) Jmerte(1) scss(1) 项目打包(2)
You might like
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
详解json在php中的应用
2018/09/30 PHP
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir：队伍气氛良好
2014/07/11 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
500行python代码实现飞机大战
2020/04/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
SportsDirect.com新加坡：英国第一体育零售商
2019/03/30 全球购物
美国办公用品折扣网站：Shoplet.com
2019/11/24 全球购物
文职个人求职信范文
2013/09/23 职场文书
公司担保书范文
2014/05/21 职场文书
离婚协议书范本样本
2014/08/19 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
谢师宴家长致辞
2015/07/27 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers