Accordion手风琴js特效是一款非常实用的功能，同时也是JquerySchool网站上第一个手风琴效果作品，前段时间很多Jquery学堂群里的网友问官网有没有这类型的作品啊，由于一直没有网友分享这类型的作品，所以今天有空整理了一个手风琴效果分享给大家用，代码结构清晰，非常适合网友们学习。
js代码如下：
var accordion = function() {
var tm = sp = 10;
function slider(n) {
this.nm = n;
this.arr = []
}
slider.prototype.init = function(t, c, k) {
var a,
h,
s,
l,
i;
a = document.getElementById(t);
this.sl = k ? k: '';
h = a.getElementsByTagName('dt');
s = a.getElementsByTagName('dd');
this.l = h.length;
for (i = 0; i < this.l; i++) {
var d = h[i];
this.arr[i] = d;
d.onclick = new Function(this.nm + '.pro(this)');
if (c == i) {
d.className = this.sl
}
}
l = s.length;
for (i = 0; i < l; i++) {
var d = s[i];
d.mh = d.offsetWidth;
if (c != i) {
d.style.width = 0;
d.style.display = 'none'
}
}
}
slider.prototype.pro = function(d) {
for (var i = 0; i < this.l; i++) {
var h = this.arr[i],
s = h.nextSibling;
s = s.nodeType != 1 ? s.nextSibling: s;
clearInterval(s.tm);
if ((h == d && s.style.display == 'none') || (h == d && s.style.display == '')) {
s.style.display = '';
su(s, 1);
h.className = this.sl
}
else if (s.style.display == '') {
su(s, -1);
h.className = ''
}
}
}
function su(c, f) {
c.tm = setInterval(function() {
sl(c, f)
},
tm)
}
function sl(c, f) {
var h = c.offsetWidth,
m = c.mh,
d = f == 1 ? m - h: h;
c.style.width = h + (Math.ceil(d / sp) * f) + 'px';
c.style.opacity = h / m;
c.style.filter = 'alpha(opacity=' + h * 100 / m + ')';
if (f == 1 && h >= m) {
clearInterval(c.tm)
} else if (f != 1 && h == 1) {
c.style.display = 'none';
clearInterval(c.tm)
}
}
return {
slider: slider
}
}();
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
Accordion 手风琴效果 选项卡 导航菜单 滚动特效 滑动插件 js特效