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

时间：2021-05-25

话不多说，请看代码：

<!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; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .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-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%; } .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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章