JavaScript dynamic scaling + fading fade _javascript tips

Interval variable
var inl = [];
Original transparency
var opa = 100;
Judge the browser
var ie = Navigator.appname = "Microsoft Internet Explorer"? "Microsoft Internet Explorer": ";
Zoom out and open the button
Function Gogo () {
Speed = 50;
var mode;
Use the display of the square to determine whether to shrink or enlarge
if (!$ (' tmp '). Style.display) {
mode = "-";
Display is normal the words set interval shrink
inl[' suotu '] = SetInterval ("Suodi ('-')", 10);
}else {
mode = "+";
Display is none of the words first to change the display back to normal, and then set interval amplification
$ (' tmp '). Style.display = "";
inl[' suotu '] = SetInterval ("Suodi (' + ')", 10);
}
Clearinterval (inl[' dcdr '));
inl[' dcdr ' = SetInterval ("dcdr (' + mode + ')", 10);
}
Fade Fade In
Function Dcdr (OP) {
Get transparency
OPA = define (OP, OPA, 4, 0, 100);
Update transparency
Ie? $ (' tmp '). Style.filter = "Alpha (opacity=" + OPA + ")": $ (' tmp '). style.opacity = opa/100;
If transparency is less than or equal to 0 or greater than or equal to 100
if (OPA <= 0 | | | OPA >= 100) {
Stop interval
Clearinterval (inl[' dcdr '));
}
}
function define (ID, a, b, A2, A3) {
if (id = = "-") {
A-= b;
if (a <= A2) {
a = A2;
}
}else {
A + b;
If (a >= A3) {
A = A3;
}
}
return A;
}
Shrink or enlarge
function Suodi (opt) {
If the speed is greater than 1, continue dividing by s, or equal to 1.
Speed = speed > 1? Speed * 0.862:1;
Get height
var hw = define (OPT, $ (' tmp '). ClientHeight, speed, speed, 300);
Set Height and width
$ (' tmp '). style.height = HW + "px";
$ (' tmp '). style.width = HW + "px";
If the height of the box is less than the speed
if ($ (' tmp '). ClientHeight <= speed) {
Hide Squares
$ (' tmp '). Style.display = "None";
Change the button name to "open"
$ (' Anniu '). Value = "OPEN";
Close interval
Clearinterval (inl[' Suotu '));
}else if ($ (' tmp '). clientwidth >= 300) {
Change button name to "Shrink"
$ (' Anniu '). Value = "shrink";
Close interval
Clearinterval (inl[' Suotu '));
}
}
Simplified getElementById to $
var $ = function ($) {
Return document.getElementById ($);
}
Interval variable
var inl = [];
Original transparency
var opa = 100;
Judge the browser
var ie = Navigator.appname = "Microsoft Internet Explorer"? "Microsoft Internet Explorer": ";
Zoom out and open the button
Function Gogo () {
Speed = 50;

var mode;
Use the display of the square to determine whether to shrink or enlarge
if (!$ (' tmp '). Style.display) {
mode = "-";
Display is normal the words set interval shrink
inl[' suotu '] = SetInterval ("Suodi ('-')", 10);
}else {
mode = "+";
Display is none of the words first to change the display back to normal, and then set interval amplification
$ (' tmp '). Style.display = "";
inl[' suotu '] = SetInterval ("Suodi (' + ')", 10);
}
Clearinterval (inl[' dcdr '));
inl[' dcdr ' = SetInterval ("dcdr (' + mode + ')", 10);
}
Fade Fade In
Function Dcdr (OP) {
Get transparency
OPA = define (OP, OPA, 4, 0, 100);

Update transparency
Ie? $ (' tmp '). Style.filter = "Alpha (opacity=" + OPA + ")": $ (' tmp '). style.opacity = opa/100;

If transparency is less than or equal to 0 or greater than or equal to 100
if (OPA <= 0 | | | OPA >= 100) {
Stop interval
Clearinterval (inl[' dcdr '));
}
}
function define (ID, a, b, A2, A3) {
if (id = = "-") {
A-= b;
if (a <= A2) {
a = A2;
}
}else {
A + b;
If (a >= A3) {
A = A3;
}
}
return A;
}
Shrink or enlarge
function Suodi (opt) {
If the speed is greater than 1, continue dividing by s, or equal to 1.
Speed = speed > 1? Speed * 0.862:1;

Get height
var hw = define (OPT, $ (' tmp '). ClientHeight, speed, speed, 300);
Set Height and width
$ (' tmp '). style.height = HW + "px";
$ (' tmp '). style.width = HW + "px";
If the height of the box is less than the speed
if ($ (' tmp '). ClientHeight <= speed) {
Hide Squares
$ (' tmp '). Style.display = "None";
Change the button name to "open"
$ (' Anniu '). Value = "OPEN";
Close interval
Clearinterval (inl[' Suotu '));
}else if ($ (' tmp '). clientwidth >= 300) {
Change button name to "Shrink"
$ (' Anniu '). Value = "shrink";
Close interval
Clearinterval (inl[' Suotu '));
}
}
Simplified getElementById to $
var $ = function ($) {
Return document.getElementById ($);
}

<body style= "margin:0; padding:100px 150px "style=" margin:0; padding:100px 150px ">
<table style= "border:1px solid #ccc" style= "border:1px solid #ccc" >
<tr>
<td><div style= "Position:absolute; font-family: ' Microsoft Ya-hei '; font-size:13px "style=" Position:absolute; font-family: ' Microsoft Ya-hei '; Font-size:13px "> Demo </div><div id=" tmp "style=" height:300px; width:300px; Background:black "></div></td>
</tr>
<tr>
&LT;TD align= "center" style= "padding-top:20px" style= "padding-top:20px" >
<input id= "Anniu" type= button "value=" Narrowing "style=" font-family: ' Microsoft ya Black '; font-size:12px; Font-weight:bold; border:1px solid #ccc "style=" font-family: ' Microsoft Ya-hei '; font-size:12px; Font-weight:bold; border:1px solid #ccc "onfocus=" This.blur () "onclick=" Gogo () "/>
</td>
</tr>
</table>
</body>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> thumbnail </title> </pead> <script type=" Text/javascript "language=" JavaScript "charset=" gb2312 ">//interval variable var inl = []; Original transparency var OPA = 100; Judge browser var ie = Navigator.appname = = "Microsoft Internet Explorer"? "Microsoft Internet Explorer": "; Reduce and Open button function Gogo () {speed = 50; var mode; Use the display of the square to determine whether to shrink or enlarge the IF (!$ (' tmp '). style.display) {mode = "-"; Display is normal words set interval shrink inl[' suotu ' = SetInterval ("Suodi (')", 10); }else {mode = "+"; Display is none words first to change the display back to normal, and then set interval to enlarge $ (' tmp '). Style.display = ""; inl[' suotu '] = SetInterval ("Suodi (' + ')", 10); } clearinterval (inl[' dcdr ')); inl[' DCDR ']= SetInterval ("dcdr (' + mode +") ", 10); }//Fade in Function dcdr (OP) {//Get transparency Opa = define (OP, OPA, 4, 0, 100); Update transparency IE? $ (' tmp '). Style.filter = "Alpha (opacity=" + OPA + ")": $ (' tmp '). style.opacity = opa/100; If the transparency is less than or equal to 0 or greater than or equal to (OPA <= 0 | | | OPA >= 100) {//Stop interval clearinterval (inl[' dcdr ']); } function define (ID, a, b, A2, A3) {if (id = = "-") {A-= B; if (a <= a2) {a = A2; }}else {a = B; If (a >= a3) {a = A3; } return A; }//Zoom out or enlarge function Suodi (opt) {//speed greater than 1 continues divided by S, otherwise equals 1 speed = speed > 1? Speed * 0.862:1; Get height var hw = define (OPT, $ (' tmp '). ClientHeight, speed, speed, 300); Set height and width $ (' tmp '). style.height = HW + "px"; $ (' tmp '). style.width = HW + "px"; If the height of the box is less than speed if ($ (' tmp '). ClientHeight <= speed) {//Hide box $ (' tmp '). StylE.display = "None"; The button name is changed to "open" $ (' Anniu '). Value = "OPEN"; Close interval clearinterval (inl[' Suotu ')); }else if ($ (' tmp '). clientwidth >= 300) {//button name changed to "Shrink" $ (' Anniu '). Value = "shrink"; Close interval clearinterval (inl[' Suotu ')); }//simplified getElementById to $ var $ = function ($) {return document.getElementById ($); } </script> <body > <table > <tr> <td><div Microsoft Ya-Black '; Font-size:13px ">  demo </div><div id=" tmp "></div></td> </tr> <tr> &LT;TD align= "center" > <input id= "anniu" type= "button" value= "shrink" Microsoft ya black; font-size:12px; Font-weight:bold; border:1px solid #ccc "onfocus=" This.blur () "onclick=" Gogo () "/> </td> </tr> </table> &LT;/BODY&G T </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]