首页
所有分类
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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
详解如何使用nvm管理Node.js多版本
May 06 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
模拟登录(1) 单向链表(1) 接口(1) NumPy(2) 扫雷(1) 路由(1) 抽象类(1) Scheduled(1) router(1) Date(1)
You might like
与空气斗智斗勇的经典《Overlord》，传说中的“无稽之谈”
2020/04/09 日漫
C# Assembly类访问程序集信息
2009/06/13 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php中取得文件的后缀名？
2012/02/20 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JavaScript的parseInt 取整使用
2011/05/09 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Python绘制3D图形
2018/05/03 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
罗技美国官网：Logitech美国
2020/01/22 全球购物
事业单位辞职信范文
2014/01/19 职场文书
党员承诺书怎么写
2014/05/20 职场文书
工程项目经理任命书
2014/06/05 职场文书
物理学专业求职信
2014/07/04 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2014年调度员工作总结
2014/11/19 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书