Tip: you can modify some code before running
<!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><title>Compatible with the animation effects of various browsers</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Body {margin: 0;} body, td {font-size: 12px ;}</style><script language="javascript">Function addload (func) {window. attachEvent? Window. attachEvent ("onload", func): window. addEventListener ("load", func, false);}/* animr (id, attr, ol, al, bfunc, afunc) id object (string | object) attr animation mode (string | number) (width: 1, height: 2, left: 3, top: 4, opac: 5) ol original state (number) (-1: use the current state without accumulating, 0: use the current state and accumulate the final state,> 0: Fixed a state) al final state (number) action before bfunc animation (function) afunc animation after the action (function) */function animr () {var id = typeof arguments [0] = "string "? Document. getElementById (arguments [0]): arguments [0]; if (! Id) {alert (arguments [0] + "initialization error n please check whether the ID is correct! "); Return;} var cie = window. activeXObject, step = 15, // increment. The greater the value, the more obvious the buffer effect is. attrs = {"width": 1, "height": 2, "left": 3, "top": 4, "opac": 5}, attr = typeof arguments [1] = "string "? Attrs [arguments [1]. toLowerCase ()]: arguments [1]; if (attr = undefined | attr> 5 | parseInt (attr )! = Attr) {alert ("animation mode setting error! "); Return;} // Animation mode var ol = typeof arguments [2] =" number "? Arguments [2]: null, // original State al = typeof arguments [3] = "number "? Arguments [3]: null; // final state if (ol = null | al = null) return; var bfunc = arguments [4], // the action before the animation afunc = arguments [5], // the action after the animation _ id = id, _ ol = ol, _ al = al, offset = function (obj) {// Obtain the current absolute status var x = obj. offsetLeft, y = obj. offsetTop, w = obj. offsetWidth, h = obj. offsetHeight; while (obj = obj. offsetParent) {x + = obj. offsetLeft; y + = obj. offsetTop;} return {"x": x, "y": y, "w": w, "h": h }}; if (! Id. effect) {id. effect = {}; id. effect. width = 0; id. effect. height = 0; id. effect. left = 0; id. effect. top = 0; id. effect. opac = 0 ;}; if (bfunc) bfunc (); switch (attr) {case 1: clearInterval (id. effect. width); if (_ ol = 0 | _ ol =-1) ol = offset (_ id ). w; var gattr = id. getAttribute ("owidth"); if (! Gattr & _ ol =-1) id. setAttribute ("owidth", ol); id. style. width = gattr? Gattr + "px": ol + "px"; if (_ ol = 0 | _ ol =-1) al + = parseInt (id. style. width); if (al <0) al = 0; id. style. overflow = "hidden"; id. effect. width = setInterval (function () {var il = parseInt (id. style. width); if (_ al> = 0) {if (il<al){id.style.width = (il+Math.ceil((al-il)/step)) + "px";}else{clears();}}else{if(il>Al) {id. style. width = (il-Math.ceil (il-al)/step) + "px" ;}else {clears () ;}}, 1); var clears = function () {id. style. width = al + "px"; clearInterval (id. effect. width); if (afunc) afunc () ;}; break; case 2: clearInterval (id. effect. height); if (_ ol = 0 | _ ol =-1) ol = offset (_ id ). h; var gattr = id. getAttribute ("oheight"); if (! Gattr & _ ol =-1) id. setAttribute ("oheight", ol); id. style. height = gattr? Gattr + "px": ol + "px"; if (_ ol = 0 | _ ol =-1) al + = parseInt (id. style. height); if (al <0) al = 0; id. style. overflow = "hidden"; id. effect. height = setInterval (function () {var il = parseInt (id. style. height); if (_ al> = 0) {if (il<al){id.style.height = (il+Math.ceil((al-il)/step)) + "px";}else{clears();}}else{if(il>Al & (il-Math.ceil (il-al)/step)> 0) {id. style. height = (il-Math.ceil (il-al)/step) + "px" ;}else {clears () ;}}, 1); var clears = function () {id. style. height = al + "px"; clearInterval (id. effect. height); if (afunc) afunc () ;}; break; case 3: clearInterval (id. effect. left); if (_ ol = 0 | _ ol =-1) ol = offset (_ id ). x; var gattr = id. getAttribute ("oleft"); if (! Gattr & _ ol =-1) id. setAttribute ("oleft", ol); id. style. left = gattr? Gattr + "px": (id. style. left! = ""? Id. style. left: ol + "px"); id. style. top = id. style. top! = ""? Id. style. top: offset (_ id ). y + "px"; if (_ ol = 0 | _ ol =-1) al + = parseInt (id. style. left); id. style. position = "absolute"; id. effect. left = setInterval (function () {var il = parseInt (id. style. left); if (_ al> = 0) {if (il<al){id.style.left = (il+Math.ceil((al-il)/step)) + "px";}else{clears();}}else{if(il>Al) {id. style. left = (il-Math.ceil (il-al)/step) + "px" ;}else {clears () ;}}, 1); var clears = function () {id. style. left = al + "px"; clearInterval (id. effect. left); if (afunc) afunc () ;}; break; case 4: clearInterval (id. effect. top); if (_ ol = 0 | _ ol =-1) ol = offset (_ id ). y; id. style. left = id. style. left! = ""? Id. style. left: offset (_ id). x + "px"; var gattr = id. getAttribute ("otop"); if (! Gattr & _ ol =-1) id. setAttribute ("otop", ol); id. style. top = gattr? Gattr + "px": (id. style. top! = ""? Id. style. top: ol + "px"); if (_ ol = 0 | _ ol =-1) al + = parseInt (id. style. top); id. style. position = "absolute"; id. effect. top = setInterval (function () {var il = parseInt (id. style. top); if (_ al> = 0) {if (il<al){id.style.top = (il+Math.ceil((al-il)/step)) + "px";}else{clears();}}else{if(il>Al) {id. style. top = (il-Math.ceil (il-al)/step) + "px" ;}else {clears () ;}}, 1); var clears = function () {id. style. top = al + "px"; clearInterval (id. effect. top); if (afunc) afunc () ;}; break; case 5: clearInterval (id. effect. opac); if (_ ol = 0 | _ ol =-1) {if (cie) ol = id. style. filter! = ""? Id. filters. alpha. opacity: 100; else ol = id. style. opacity! = ""? Id. style. opacity * 100: 100;} var gattr = id. getAttribute ("opac"); if (! Gattr & _ ol =-1) id. setAttribute ("opac", ol); if (cie) id. style. filter = "alpha (opacity =" + (gattr? Gattr: ol) + ")"; else id. style. opacity = gattr? Gattr/100: ol/100; var _ il = cie? Id. filters. alpha. opacity: id. style. opacity; if (al <0) al = 100-Math. abs (al); id. effect. opac = setInterval (function () {if (cie) {var il = id. filters. alpha. opacity; if (_ il> al) {if (il> al) {id. filters. alpha. opacity-= step/10;} else {clears () ;}} else {if (il<al){id.filters.alpha.opacity+=step/10;}else{clears();}}}else{var il = id.style.opacity;if(_il*100>Al) {if (il * 100> al) {var rl = parseFloat (id. style. opacity); rl-= step/1000; id. style. opacity = rl ;}else {clears () ;}} else {if (il * 100<al){var rl = parseFloat(id.style.opacity);rl+=step/1000;id.style.opacity = rl;}else{clears();}}}}, 1);var clears = function(){if(cie) id.filters.alpha.opacity = al;else id.style.opacity = al/100;clearInterval(id.effect.opac);if(afunc) afunc();};break;}}addload(function(){animr("demo1", 1, 0, 300)});</script></head><body><!--把下面代码加到<body>与</body>之间--><table width="400" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="100"><div > <div ></div> <div id="po" ></div> </div></td> </tr> <tr> <td height="60"><div id="demo1" ></div></td> </tr> <tr> <td> </td> </tr> <tr> <td height="60"><div id="demo2" ></div></td> </tr> <tr> <td > <input type="button" value=" -Width " onClick="animr('demo1', 'width', 300, -200)"> <input type="button" value=" +Width " onClick="animr('demo2', 1, 0, 200)"><br> <input type="button" value=" -Height " onClick="animr('demo1', 'height', 0, -200, '', function(){alert(document.getElementById('demo1').style.height)})"> <input type="button" value=" +Height " onClick="animr('demo2', 2, 0, 200)"><br> <input type="button" value=" -Left " onClick="animr('demo1', 'left', 0, -200)"> <input type="button" value=" +Left " onClick="animr('demo2', 3, -1, 200)"><br> <input type="button" value=" -Top " onClick="animr('demo1', 'top', 0, -200)"> <input type="button" value=" +Top " onClick="animr('demo2', 4, 0, 200)"> <input type="button" value=" Top " onClick="animr('demo2', 4, 0, 200, '', function(){animr('demo2', 4, 0, -200)})"><br> <input type="button" value=" -Opacity " onClick="animr('demo2', 'opac', 0, 20)"> <input type="button" value=" +Opacity " onClick="animr('demo2', 5, 0, 100)"><br> <input type="button" value=" Progress " onClick="animr('po', 1, 1, 100)"> </td> </tr></table></body></html>
Tip: you can modify some code before running
