简明现代魔法 -> JavaScript -> JavaScript手风琴效果菜单

JavaScript手风琴效果菜单

2010-06-21

这是一个类似手风琴拉动效果的菜单 - Animated JavaScript Accordion,可以帮助你在设计时省去不少的时间,而且可以为你的网页增色不少。这是一款可以折叠的菜单,提供了两种样式,折叠滚动时效果平滑。宽度高度都可以通过设置样式表文件修改,甚至颜色等也可以通过修改背景图片进行修改。代码整体非常简洁,便于修改。推荐需要的朋友使用。

效果演示

About
This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit leigeber.com.
Instructions
To initialize an accordion use the following code:

var mySlider=new accordion.slider("mySlider");
mySlider.init("slider",0,"open");


The init function takes 3 parameters: the id of the "dl", the location of the initially expanded section (optional) and the class for the active header (optional).
Licensing & Support
This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by clicking here.

JavaScript Code

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.offsetHeight; if(c!=i){d.style.height=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'){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.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=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}
}();

CSS Code

* {margin:0; padding:0}

#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(../images/header.gif)}
.accordion dt:hover {background:url(../images/header_over.gif)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}

#accordion2 {width:259px; margin:50px auto; border:1px solid #333; border-top:none}
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(../images/arrow_down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
.accordion2 dt:hover {background-color:#555}
.accordion2 .open {background-color:#444; background-image:url(../images/arrow_up.gif)}
.accordion2 dd {overflow:hidden; background:#fff}
.accordion2 span {display:block; width:229px; border-top:none; padding:15px}

查看本页源代码即可获得这个效果的所有代码。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们