浏览 1200 次
|
锁定老帖子 主题：可以跳动的手风琴 Accordion
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-13
最后修改：2011-04-13
<!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>
重复造下轮子 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
