首页
所有分类
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日期相关函数总结分享
Oct 15 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
基本DOM节点操作
Jan 17 Javascript
详解jquery validate实现表单验证 （正则表达式）
Jan 18 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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) S-2000(1) Lifecycle(1) 脏读(2) 温控(1) IC-R9500(1) 小喇叭开始广播了(1) 微信(2) 克隆(1)
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
MVVM模式中ViewModel和View、Model有什么区别？
2015/06/19 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python处理session的方法整理
2019/08/29 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
宝拉珍选澳大利亚官方购物网站：Paula’s Choice澳大利亚
2016/09/13 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
遗产继承公证书
2014/04/09 职场文书
会议欢迎标语
2014/06/30 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书