原生js实现手风琴功能（支持横纵向调用）
作者：继小鹏
本文主要介绍了原生js实现手风琴功能（支持横纵向调用）的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！