用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1

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

以及触发动作过快会导致每一个li递增两次到三次的情况,这个原因跟类(Action.js)本身无关.原因来源于example2.html中的演示代码.
目前正在极力修改中.
咨询改版升级信息请关注 我的blog
http://auntion.blogbus.com
或者加我QQ询问:82874972
action.js


代码如下:

/*
*

效果类

By Auntion

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){case 0:{var method = this.judgment();this.base(method);}break;case 1:{var method = this.judgment();this.alpha(method);}break;default:{alert("错误: 不是一个可用的效果! 应为0和1,默认执行0");var method = 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];}else if(this.endW != null && this.endH == null){this.method = "width";this.now = this.width;}else if(this.endW == null && this.endH != null){this.method = "height";this.now = this.height;    }return this.method;},create: function(codeString){var ShowHideGoTo;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;}return ShowHideGoTo;},expressions: function(num,end,now,step){var exec;switch(num){    case 0 : exec = (end - now)*step;break;            default : exec = (end - now)*step;break;}return exec;}};

language.js


代码如下:

/*
*
语言扩展包

By Auntion

QQ:82874972

Blog:Auntion@blogbus.com

Email:Auntion@Gmail.com

版权没有,随便使用.

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

*
*/

var Class={create: function() {return function() {this.initialize.apply(this, arguments);}}};$id = function(i){return document.getElementById(i);};$name = function(i){return document.getElementsByName(i);};$class = function(className,baseId) {var fatherId = null;if(!baseId){fatherId = document;}else{var id = baseId;fatherId = $id(id);}var basic = fatherId.getElementsByTagName('*') || document.all;var child = null;var classNames = null;var aggregate = []; for (var i = 0; i < basic.length; i++) {child = basic[i];classNames = child.className.split(' ');for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {aggregate.push(child);break;}}}return aggregate;};String.prototype.toInt = function(){return parseInt(this.replace(/[a-zA-Z]+/,''));};Number.prototype.isZero = function(){return (this < 0) ? 0 : this;};Function.prototype.bind = function(e) {var md = this;return function(){return md.apply(e,arguments);}};Object.prototype.attachEvent=function(method,func){if(!this[method]) this[method]=func;else this[method]=this[method].attach(func);};Function.prototype.attach=function(func){var f=this;return function(){f();func();}};

example.html


代码如下:

<!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=gb2312" />
<title>example1</title>
<script src="Language.js" language="javascript"></script>
<script src="Action.js" language="javascript"></script>
<style type="text/css">

*,body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

#main {
    margin:50px;
    padding:0px 0px 20px 0px;
    border:solid 1px #cccccc
}

#button {
    color:#0099FF;
}

#button li{
    margin-right:10px;
    padding:5px 0 0 0;
    width:104px;
    height:22px;
    border: solid 1px #cccccc;
    background-color: #eeeeee;
    float:left;
    text-align:center;
}

#demo{
    margin-top:20px;
    background-color:#CCCCCC;
    color:#f5f5f5;
    float:inherit;
    /*border:solid 1px #aaaaaa;*/
}

</style>
</head>
<body>

<table border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td>
    <div id="button">
        <ul>
            <li id="a">恢复初始值</li>
            <li id="b">隐藏</li>
            <li id="c">宽 + 30</li>
            <li id="d">高 + 30</li>
            <li id="e">宽 - 30</li>
            <li id="f">高 - 30</li>
            <li id="i">宽600,高100</li>
        </ul>

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

<table border="0" align="center" cellpadding="0" cellspacing="0">
      <tr><td align="center" valign="middle">
        <div id="demo" style="height:200px;width:200px;"></div>
  </td></tr></table>

<script language="javascript" type="text/javascript">
var element = $id("demo");

var width = element.offsetWidth;
var height= element.offsetHeight;

alert(width)

var step = 0.115

function now(){
    this.nowWidth = element.style.width.toInt();
    this.nowHeight= element.style.height.toInt();
}

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

new ShowHide(element,width,height,0,step);

}

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

new ShowHide(element,0,0,0,step);

}

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

var test = new now();
        new ShowHide(element,test.nowWidth+30,null,0,step);

}

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

var test = new now();
        new ShowHide(element,null,test.nowHeight+30,0,step);

}

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

var test = new now();
        new ShowHide(element,test.nowWidth-30,null,0,step);

}

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

var test = new now();
        new ShowHide(element,null,test.nowHeight-30,0,step);

}

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

new ShowHide(element,600,100,0,step)

}
</script>
</body>
</html>