首页
所有分类
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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
jQuery选择器源码解读（五）：tokenize的解析过程
Mar 31 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
浅谈react useEffect闭包的坑
Jun 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
怀旧期刊(1) 长波(3) 电台频率(32) Harman Kardon(1) 下载(1) 保养(1) 短波(8) 广播(8) 无线电(12) 收音机(62)
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
神盾加密解密教程（三）PHP 神盾解密工具
2014/06/08 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php表单处理操作
2017/11/16 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
vue实现文件上传读取及下载功能
2020/11/17 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Django中处理出错页面的方法
2015/07/15 Python
Python制作Windows系统服务
2017/03/25 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python for i in range ()用法详解
2020/09/18 Python
python给list排序的简单方法
2020/12/10 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌：Volcom（钻石）
2017/04/20 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers