Please note that the effect of example2.html under Firefox is not rounded in IE, because of compatibility.
And the trigger action too fast will cause each Li to increment two times to three times, this reason is not related to the class (Action.js) itself. The reason comes from the demo code in example2.html.
is currently being vigorously revised.
Consultation revision update information please pay attention to my blog
Http://auntion.blogbus.com
Or add me QQ inquiry: 82874972
Action.js
Copy Code code as follows:
/*
*
Effect class
by auntion
qq:82874972
Blog:auntion@blogbus.com
Email:auntion@gmail.com
Copyright No, casual use.
Do not delete this part of the comment when you use it.
*
*/
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 ("Error: is not an available effect! should be 0 and 1, default execution 0"); var method = this.judgment (); This.base (method);}}},base:&nBsp;function (method) {this.element.style.overflow = "hidden"; this.goto = this.create },alpha: function (method,step,opacity) {alert ("unfinished effect, automatically replaced by default effect."); 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&NBSP;>&NBSP;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&NBSP;>&NBSP;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&NBSP;>&NBSP;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&NBSP;>&NBSP;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); 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
Copy Code code as follows:
/*
*
Language expansion pack
by auntion
qq:82874972
Blog:auntion@blogbus.com
Email:auntion@gmail.com
Copyright No, casual use.
Do not delete this part of the comment when you use it.
*
*/
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);}};o Bject.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
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<table border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr>
<td>
<div id= "button" >
<ul>
<li id= "A" > Restore initial value </li>
<li id= "B" > Hide </li>
<li id= "C" > wide + 30</li>
<li id= "D" > High + 30</li>
<li id= "E" > Wide-30</li>
<li id= "F" > High-30</li>
<li id= "I" > Width 600, high 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>
