Please refer to example2.html. The effect in firefox is not rounded up in ie because of compatibility.
DEMO code in pipeline.
It is being modified.
Please follow my blog for consultation on version upgrade information
Http://auntion.blogbus.com
Or add me QQ to ask: 82874972
Action. js
Copy codeThe Code is as follows:
/*
*
Effect type
By Auntion
QQ: 82874972
Blog: Auntion@blogbus.com
Email: Auntion@Gmail.com
No copyright. Use it as needed.
Do not delete this part of comments during use. Thank you!
*
*/
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: not an available effect! It must be 0 and 1. The default value is 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 ("unfinished effect, automatically replaced by the 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], th Is. 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. wid Th> 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
Copy codeThe Code is as follows:
/*
*
Language extension package
By Auntion
QQ: 82874972
Blog: Auntion@blogbus.com
Email: Auntion@Gmail.com
No copyright. Use it as needed.
Do not delete this part of comments during use. Thank you!
*
*/
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; }}} ret Urn 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
Copy codeThe Code is as follows:
<! 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: pixel PX;
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"> restore the initial value </li>
<Li id = "B"> hide </li>
<Li id = "c"> width + 30 </li>
<Li id = "d"> height + 30 </li>
<Li id = "e"> width-30 </li>
<Li id = "f"> high-30 </li>
<Li id = "I"> 600 in width and 100 in height </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 (elements, 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>