可以跳动的手风琴 Accordion

enix2212

浏览: 25395 次
性别:
来自: 北京

最近访客更多访客>>

sp42

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

JavaScript C C++C#XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ padding: 0; margin:0 ;}
#moduleAccordion h3 { line-height: 30px; height: 30px; background-color: #eee; overflow: hidden; border: 1px dashed #CCC; box-shadow:2px 2px 2px 2px #ccc; cursor: pointer; }
</style>
<script type="text/javascript">
	function moduleAccordion(O){
		var thee=this,doc=document,indicator=arguments.callee;
		thee.wrapper=O.wrapper;
		thee.handler=O.handler || 'h3';
		thee.container=O.container || 'div';
		
		var wrapper=doc.getElementById(thee.wrapper),handler=wrapper.getElementsByTagName(thee.handler),container=wrapper.getElementsByTagName(thee.container) , _handler=getChildLength(handler,wrapper), _container=getChildLength(container,wrapper); 
		if(!cheackCondition()) return;
		function cheackCondition(){
			if(!wrapper) return false;
			if(!(_handler.length== _container.length))return false;
			return true;
		}
		function getChildLength(c,p){	
			var i=0,len=c.length,t=0,o=[];
			for(;i<len;){
				c[i].parentNode==p && (++t,o.push(c[i])) ;
				i++;
			}
			return { length : t,obt : o };
		}
		indicator.prototype.constructor = indicator.name;
		(typeof thee.each !='function') && (indicator.prototype.each = function (o, fn) {
			var i = 0,
				key, len = o.length,
				rt = this || window;
			if (len === undefined) {
				for (key in o) {
					if (fn.call(rt, key, o[key]) === false) {
						break;
					}
				}
			} else {
				for (; i < len && fn.call(rt, i, o[i]) !== false; ++i) {}
			}
			return o;
		});	
		indicator.prototype.Linear = function(t,b,c,d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        };
		indicator.prototype.fx=function(o){
			var b=0,c=thee.getHeight(o),d=80,t=0,k=0;
			~function(){
				o.style.height=Math.ceil(thee.Linear(t,b,c,d))+'px';
				if(parseInt(o.style.height)<c){ t++; setTimeout(arguments.callee, 5);}; 
				if(k<100){ k++; thee.fade.call(o,Math.ceil(thee.Linear(k,b,100,d)));}; 
			}();
		};
		indicator.prototype.fade=function (i){  
			this.style.filter ="alpha(opacity=" + i + ")";  
			this.style.opacity= i/100;  
		} ;
		indicator.prototype.getHeight = function(o){
			var t=0;
			o.style.visiblity='hidden';
			t=o.scrollHeight;	
			o.style.visiblity='hidden';
			return t;
		};
		indicator.prototype.release= function (){
			thee.each(_container.obt,function(a,b){ b.style.cssText='height:0;overflow:hidden;';	});
		};
		indicator.prototype.init = function (){
			thee.release();
			thee.each(_handler.obt,function(a,b){
				thee.play(b);
			});
		};
		indicator.prototype.play=function (o){
			thee.addEvent(o,'click',function(e){
				var e=window.event || e;
				var t=e.srcElement || e.target,index=thee.index(t,_handler.obt),sibling=_container.obt[index];
				if(sibling.offsetHeight==0){
					thee.release();
					thee.fx(sibling);
				}else{
					return false;
				}
			},false);
		};
		indicator.prototype.index = function (a,b){
			var t=-1;
			thee.each(b,function(x,y){
				a===y && (t=x);	
			});
			return t;
		};
		indicator.prototype.addEvent = function (elem, evType, fn, capture){
			if (elem.addEventListener) {
				elem.addEventListener(evType, fn, capture);
			}else if (elem.attachEvent) {
				elem['e' + evType + fn] = fn;
				elem[evType + fn] = function () {
					elem['e' + evType + fn](window.event)
				};
				elem.attachEvent('on' + evType, function () {
					fn.call(elem);
				});
			} else {
				elem['on' + evType] = fn;
			}
		};
		return {init: function(){thee.init()}}
	}
</script>
</head>

<body>
<div id="moduleAccordion">
    <h3>1</h3>
    <div>
    	<img src="http://i0.itc.cn/20110324/841_73d5cd8b_51ce_41bd_b40e_6ca0a91550b0_0.jpg" />
    </div>
    <h3>2</h3>
    <div>
    	<img src="http://i3.itc.cn/20110320/841_a342b3e5_5220_4d4f_be17_0b82785c753b_0.jpg" />
</div>
    <h3>3</h3>
    <div>
    	<img src="http://i0.itc.cn/20110324/841_73d5cd8b_51ce_41bd_b40e_6ca0a91550b0_0.jpg" />
        <div id="123"></div>
    </div>
    <h3>4</h3>
    <div>
    	<img src="http://i3.itc.cn/20110320/841_a342b3e5_5220_4d4f_be17_0b82785c753b_0.jpg" />
    </div>
</div>
<script type="text/javascript">
	new moduleAccordion({wrapper:'moduleAccordion'}).init()
</script>
</body>
</html>

重复造下轮子

分享到：

让函数有记忆能力 | javascript new 关键字的运行原理

2011-04-13 15:02
浏览 847
评论(0)
论坛回复 / 浏览 (0 / 1200)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可以跳动的手风琴 Accordion

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可以跳动的手风琴 Accordion

评论

发表评论

相关推荐

[javascript]9宫格拖拽拼图游戏 puzzle

避免悲剧 密码生成器

jQuery创建实例与原型继承揭秘

[Javascript]单例模式（singleton ）

javascript1.7新语法

javascript undo redo

duffsDevice 高速版

ECMAScript.js2

仅限正整数输入

Another JavaScript quiz

跨浏览器可8方向拖拽剪裁框

选项卡

scroll base

拖拽排序列表单例

Animate Baseclass

很棒的时间线控件

fade方法

核心只要两行即可实现添加或移除className

让函数有记忆能力

javascript new 关键字的运行原理

最近访客更多访客>>

避免悲剧密码生成器