全网整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
话不多说，请看代码：
<!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手风琴效果
# 纵向手风琴
# js
# 手风琴
# JS实现图片手风琴效果
# Agularjs妙用双向数据绑定实现手风琴效果
# JavaScript手风琴页面制作
# Vue.js手风琴菜单组件开发实例
# js实现带三角符的手风琴效果
# js实现简单的手风琴效果
# js以及jquery实现手风琴效果
# 原生JS实现垂直手风琴效果
# Html5 js实现手风琴效果
# JS实现手风琴特效
# 鼠标点击
# 绑定
# 多说
# 首页
# 默认值
# 不传
# top
# auto
# decoration
# header
# width
# line
# border
# dashed
# align
# main
# font
# size
# relative
# padding
相关文章：
简历在线制作网站免费,免费下载个人简历的网站是哪些？
如何快速生成高效建站系统源代码？
如何选择适合PHP云建站的开源框架？
建站主机默认首页配置指南：核心功能与访问路径优化
定制建站价位费用解析与套餐推荐全攻略
网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？
实现点击下箭头变上箭头来回切换的两种方法【推荐】
建站之星免费模板：自助建站系统与智能响应式一键生成
深圳网站制作案例,网页的相关名词有哪些？
如何用虚拟主机快速搭建网站？详细步骤解析
网站微信制作软件,如何制作微信链接？
高性能网站服务器部署指南：稳定运行与安全配置优化方案
建站之星如何助力网站排名飙升？揭秘高效技巧
北京网站制作网页,网站升级改版需要多久？
网站网页制作电话怎么打,怎样安装和使用钉钉软件免费打电话？
制作网站的过程怎么写,用凡科建站如何制作自己的网站？
实例解析angularjs的filter过滤器
如何快速登录WAP自助建站平台？
c# 在ASP.NET Core中管理和取消后台任务
定制建站是什么？如何实现个性化需求？
大连网站制作公司哪家好一点,大连买房网站哪个好？
如何快速打造个性化非模板自助建站？
教学论文网站制作软件有哪些,写论文用什么软件
？
如何彻底卸载建站之星软件？
制作门户网站的参考文献在哪,小说网站怎么建立？
韩国服务器如何优化跨境访问实现高效连接？
如何选购建站域名与空间？自助平台全解析
如何在西部数码注册域名并快速搭建网站？
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？
C#怎么创建控制台应用 C# Console App项目创建方法
,南京靠谱的征婚网站？
制作充值网站的软件,做人力招聘为什么要自己交端口钱？
制作宣传网站的软件,小红书可以宣传网站吗？
网站制作网站,深圳做网站哪家比较好？
如何自定义建站之星模板颜色并下载新样式？
jQuery 常见小例汇总
香港服务器WordPress建站指南：SEO优化与高效部署策略
免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？
较简单的网站制作软件有哪些,手机版网页制作用什么软件？
高性能网站服务器配置指南：安全稳定与高效建站核心方案
学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？
香港服务器网站推广：SEO优化与外贸独立站搭建策略
如何通过山东自助建站平台快速注册域名？
如何高效配置香港服务器实现快速建站？
制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？
如何规划企业建站流程的关键步骤？
建站之星备案流程有哪些注意事项？
javascript中的try catch异常捕获机制用法分析
潍坊网站制作公司有哪些,潍坊哪家招聘网站好？
专业网站设计制作公司,如何制作一个企业网站，建设网站的基本步骤有哪些？
*请认真填写需求信息，我们会在24小时内与您取得联系。
