原生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>

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

Javascript 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
页面中js执行顺序
Nov 09 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
Bootstrap table使用方法总结
May 10 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 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
You might like
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python 加密与解密小结
2018/12/06 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
企业形象策划方案
2014/05/29 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
信访工作汇报材料
2014/10/27 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python