请注意example2.html在firefox下效果没有在ie下圆润,其原因来源于兼容性.

以及触发动作过快会导致每一个li递增两次到三次的情况,这个原因跟类(Action.js)本身无关.原因来源于example2.html中的演示代码.

目前正在极力修改中.

咨询改版升级信息请关注我的blog

http://auntion.blogbus.com

或者加我QQ询问:82874972

action.js

复制代码 代码如下:

/*

*

效果类

ByAuntion

QQ:82874972

Blog:Auntion@blogbus.com

Email:Auntion@Gmail.com

版权没有,随便使用.

使用时请勿删除此部分注释.谢谢!

*

*/

ShowHide=Class.create();ShowHide.prototype={status:expRs={},initialize:function(ob,endW,endH,effect,step){this.element=(typeof(ob)=='object')?ob:$id(ob);if(expRs[ob.id]==null){expRs[ob.id]=true;}if(expRs[ob.id]){this.width=this.element.offsetWidth;this.height=this.element.offsetHeight;this.endW=(endW!=null)?endW.isZero():null;this.endH=(endH!=null)?endH.isZero():null;this.effect=(effect!=null)?effect:0;this.step=(step!=null)?step:0.075;this.now=[0,0];this.tryBug=this.step;this.method,this.goTo;expRs[this.element.id]=false;this.start();}},start:function(){switch(this.effect){case0:{varmethod=this.judgment();this.base(method);}break;case1:{varmethod=this.judgment();this.alpha(method);}break;default:{alert("错误:不是一个可用的效果!应为0和1,默认执行0");varmethod=this.judgment();this.base(method);}}},base:function(method){this.element.style.overflow="hidden";this.goTo=this.create(method);},alpha:function(method,step,Opacity){alert("未完成的效果,自动用默认效果替代.");this.goTo=this.base(method);},allIs:function(){this.now[0]+=this.expressions(0,this.endW,this.now[0],this.step);this.now[1]+=this.expressions(0,this.endH,this.now[1],this.step);if((this.width>this.endW)?(this.now[0]>(this.endW+this.tryBug)):(this.now[0]<(this.endW-this.tryBug))){this.element.style.width=this.now[0]+"px";}if((this.height>this.endH)?(this.now[1]>(this.endH+this.tryBug)):(this.now[1]<(this.endH-this.tryBug))){this.element.style.height=this.now[1]+"px";}else{clearInterval(this.goTo);this.element.style.width=(this.now[0]+this.tryBug)+"px";this.element.style.height=(this.now[1]+this.tryBug)+"px";expRs[this.element.id]=true;}},widthIs:function(){this.now+=this.expressions(0,this.endW,this.now,this.step);if((this.width>this.endW)?(this.now>(this.endW+this.tryBug)):(this.now<(this.endW-this.tryBug))){this.element.style.width=this.now+"px";}else{clearInterval(this.goTo);this.element.style.width=(this.now+this.tryBug)+"px";expRs[this.element.id]=true;}},heightIs:function(){this.now+=this.expressions(0,this.endH,this.now,this.step);if((this.height>this.endH)?(this.now>(this.endH+this.tryBug)):(this.now<(this.endH-this.tryBug))){this.element.style.height=this.now+"px";}else{clearInterval(this.goTo);this.element.style.height=(this.now+this.tryBug)+"px";expRs[this.element.id]=true;}},judgment:function(){if(this.endW!=null&&this.endH!=null){this.method="all";this.now=[this.width,this.height];}elseif(this.endW!=null&&this.endH==null){this.method="width";this.now=this.width;}elseif(this.endW==null&&this.endH!=null){this.method="height";this.now=this.height;}returnthis.method;},create:function(codeString){varShowHideGoTo;switch(codeString){case"all":ShowHideGoTo=setInterval(function(){this.allIs();}.bind(this),1);break;case"width":ShowHideGoTo=setInterval(function(){this.widthIs();}.bind(this),1);break;case"height":ShowHideGoTo=setInterval(function(){this.heightIs();}.bind(this),1);break;}returnShowHideGoTo;},expressions:function(num,end,now,step){varexec;switch(num){case0:exec=(end-now)*step;break;default:exec=(end-now)*step;break;}returnexec;}};

language.js

复制代码 代码如下:

/*

*

语言扩展包

ByAuntion

QQ:82874972

Blog:Auntion@blogbus.com

Email:Auntion@Gmail.com

版权没有,随便使用.

使用时请勿删除此部分注释.谢谢!

*

*/

varClass={create:function(){returnfunction(){this.initialize.apply(this,arguments);}}};$id=function(i){returndocument.getElementById(i);};$name=function(i){returndocument.getElementsByName(i);};$class=function(className,baseId){varfatherId=null;if(!baseId){fatherId=document;}else{varid=baseId;fatherId=$id(id);}varbasic=fatherId.getElementsByTagName('*')||document.all;varchild=null;varclassNames=null;varaggregate=[];for(vari=0;i<basic.length;i++){child=basic[i];classNames=child.className.split('');for(varj=0;j<classNames.length;j++){if(classNames[j]==className){aggregate.push(child);break;}}}returnaggregate;};String.prototype.toInt=function(){returnparseInt(this.replace(/[a-zA-Z]+/,''));};Number.prototype.isZero=function(){return(this<0)?0:this;};Function.prototype.bind=function(e){varmd=this;returnfunction(){returnmd.apply(e,arguments);}};Object.prototype.attachEvent=function(method,func){if(!this[method])this[method]=func;elsethis[method]=this[method].attach(func);};Function.prototype.attach=function(func){varf=this;returnfunction(){f();func();}};

example.html

复制代码 代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>example1</title>

<scriptsrc="Language.js"language="javascript"></script>

<scriptsrc="Action.js"language="javascript"></script>

<styletype="text/css">

*,body{

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

}

#main{

margin:50px;

padding:0px0px20px0px;

border:solid1px#cccccc

}

#button{

color:#0099FF;

}

#buttonli{

margin-right:10px;

padding:5px000;

width:104px;

height:22px;

border:solid1px#cccccc;

background-color:#eeeeee;

float:left;

text-align:center;

}

#demo{

margin-top:20px;

background-color:#CCCCCC;

color:#f5f5f5;

float:inherit;

/*border:solid1px#aaaaaa;*/

}

</style>

</head>

<body>

<tableborder="0"align="center"cellpadding="0"cellspacing="0">

<tr>

<td>

<divid="button">

<ul>

<liid="a">恢复初始值</li>

<liid="b">隐藏</li>

<liid="c">宽+30</li>

<liid="d">高+30</li>

<liid="e">宽-30</li>

<liid="f">高-30</li>

<liid="i">宽600,高100</li>

</ul>

</div>

</td>

</tr>

</table>

<tableborder="0"align="center"cellpadding="0"cellspacing="0">

<tr><tdalign="center"valign="middle">

<divid="demo"style="height:200px;width:200px;"></div>

</td></tr></table>

<scriptlanguage="javascript"type="text/javascript">

varelement=$id("demo");

varwidth=element.offsetWidth;

varheight=element.offsetHeight;

alert(width)

varstep=0.115

functionnow(){

this.nowWidth=element.style.width.toInt();

this.nowHeight=element.style.height.toInt();

}

$id("a").onmousedown=function(){

newShowHide(element,width,height,0,step);

}

$id("b").onmousedown=function(){

newShowHide(element,0,0,0,step);

}

$id("c").onmousedown=function(){

vartest=newnow();

newShowHide(element,test.nowWidth+30,null,0,step);

}

$id("d").onmousedown=function(){

vartest=newnow();

newShowHide(element,null,test.nowHeight+30,0,step);

}

$id("e").onmousedown=function(){

vartest=newnow();

newShowHide(element,test.nowWidth-30,null,0,step);

}

$id("f").onmousedown=function(){

vartest=newnow();

newShowHide(element,null,test.nowHeight-30,0,step);

}

$id("i").onmousedown=function(){

newShowHide(element,600,100,0,step)

}

</script>

</body>

</html>