Slowly, this time we have achieved expansion in any direction!
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 = UTF-8"/>
<Title> Untitled Document </title>
<Style type = "text/css">
<! --
# ApDiv1 {
Position: absolute;
Left: 300px;
Top: 100px;
Width: 100px;
Height: 100px;
Z-index: 1;
Background-color: # FF00FF;
}
# ApDiv2 {
Position: absolute;
Left: 402px;
Top: 100px;
Width: 100px;
Height: 100px;
Z-index: 2;
Background-color: #00 FFFF;
}
# ApDiv3 {
Position: absolute;
Left: 402px;
Top: 200px;
Width: 100px;
Height: 100px;
Z-index: 3;
Background-color: #99FF00;
}
# ApDiv4 {
Position: absolute;
Left: 300px;
Top: 200px;
Width: 100px;
Height: 100px;
Z-index: 4;
Background-color: # FFFF00;
}
-->
</Style>
</Head>
<Body>
<Div id = "apDiv1"> </div>
<Div id = "apDiv2"> </div>
<Div id = "apDiv3"> </div>
<Div id = "apDiv4"> </div>
</Body>
</Html>
<Script language = "javascript" type = "text/javascript">
Function $ (pId ){
Return document. getElementById (pId );
}
Function JPos (){
}
JPos. getAbsPos = function (pTarget ){
Var _ x = 0;
Var _ y = 0;
While (pTarget. offsetParent ){
_ X + = pTarget. offsetLeft;
_ Y + = pTarget. offsetTop;
PTarget = pTarget. offsetParent;
}
_ X + = pTarget. offsetLeft;
_ Y + = pTarget. offsetTop;
Return {x: _ x, y: _ y };
}
Function JAniObj (){
This. obj = null;
This. interval = null;
This. orgPos = null;
This.tar getPos = null;
This. orgSize = {w: 50, y: 50}; // initial length and width
This.tar getSize = {w: 100, y: 100}; // The target length and width.
This. step = {x: 10, y: 10}; // step x: x direction y: y direction
This. alpha = {s: 10, e: 90, t: 10}; // transparency, initial s, end e, step t
}
Function JAni (){
Var self = this;
Var aniObjs = {};
Var getCurrentStyleProperty = function (pObj, pProperty ){
Try {
If (pObj. currentStyle)
Return eval ("pObj. currentStyle." + pProperty );
Else
Return document. defaultView. getComputedStyle (pObj, ""). getPropertyValue (pProperty );
} Catch (e ){
Alert (e );
}
}
This. popup = function (pDiv, pOrgSize, pTargetSize, pStep, pAlpha ){
Var aniObj = new JAniObj ();
AniObjs [pDiv] = aniObj;
With (aniObj ){
Obj = $ (pDiv );
OrgPos = JPos. getAbsPos (obj );
OrgSize = pOrgSize;
TargetSize = pTargetSize;
Step = pStep;
Alpha = pAlpha;
With (obj. style ){
Overflow = "hidden ";
Position = "absolute ";
Width = pOrgSize. w + "px ";
Height = pOrgSize. h + "px ";
Left = orgPos. x + "px ";
Top = orgPos. y + "px ";
If (document. all ){
Filter = "Alpha (opacity =" + pAlpha. s + ")";
} Else
Opacity = pAlpha. s/100;
}
}
AniObj. interval = setInterval ("popup _ ('" + pDiv + "')", 10 );
}
Popup _ = function (pDivId ){
PObj = aniObjs [pDivId];
Var w = parseInt (pObj. obj. style. width );
Var h = parseInt (pObj. obj. style. height );
If (w> = Math.abs(pObj.tar getSize. w) & h> = Math.abs(pObj.tar getSize. h )){
ClearInterval (pObj. interval );
If (document. all)
PObj. obj. style. filter = "Alpha (opacity =" + pObj. alpha. e + ")";
Else
PObj. obj. style. opacity = pObj. alpha. e/100;
Delete aniObjs [pObj. obj. id];
} Else {
If (w <Math.abs(pObj.tar getSize. w ))
W + = pObj. step. x;
If (h <Math.abs(pObj.tar getSize. h ))
H + = pObj. step. y;
If (document. all ){
Var pattern =/opacity = (\ d {1, 3 })/;
Var result = pattern.exe c (pObj. obj. style. filter );
If (result! = Null ){
If (result [1] <pObj. alpha. e)
PObj. obj. style. filter = "Alpha (opacity =" + (result [1] + pObj. alpha. t) + ")"
Else
PObj. obj. style. filter = "Alpha (opacity =" + pObj. alpha. e + ")";
}
} Else {
If (pObj. obj. style. opacity <pObj. alpha. e/100 ){
PObj. obj. style. opacity = parseFloat (pObj. obj. style. opacity) + pObj. alpha. t/100;
} Else
PObj. obj. style. opacity = pObj. alpha. e/100;
}
}
PObj. obj. style. width = w + "px ";
PObj. obj. style. height = h + "px ";
If(pObj.tar getSize. w <0 ){
Var vLeft = parseInt (getCurrentStyleProperty (pObj. obj, "left "));
VLeft = isNaN (vLeft )? 0: vLeft;
PObj. obj. style. left = vLeft-pObj. step. x + "px ";
}
If(pObj.tar getSize. h <0 ){
Var vTop = parseInt (getCurrentStyleProperty (pObj. obj, "top "));
VTop = isNaN (vTop )? 0: vTop;
PObj. obj. style. top = vTop-pObj. step. y + "px ";
}
}
}
Var ani = new JAni ();
Ani. popup (
"ApDiv1 ",
{W: 50, h: 50}, // initial length and width
{W: 200, h: 200}, // target length and width
{X: 8, y: 8}, // step size
{S: 10, e: 80, t: 10} // transparency start, end, step size
);
Ani. popup (
"ApDiv2 ",
{W: 50, h: 50}, // initial length and width
{W:-200, h: 200}, // target length and width
{X: 8, y: 8}, // step size
{S: 10, e: 40, t: 2} // transparency start, end, step size
);
Ani. popup (
"ApDiv3 ",
{W: 50, h: 50}, // initial length and width
{W:-200, h:-200}, // target length and width
{X: 8, y: 8}, // step size
{S: 10, e: 40, t: 10} // transparency start, end, step size
);
Ani. popup (
"ApDiv4 ",
{W: 50, h: 50}, // initial length and width
{W: 200, h:-200}, // target length and width
{X: 8, y: 8}, // step size
{S: 10, e: 50, t: 10} // transparency start, end, step size
);
</Script>