This is a selection plug-in similar to the TAb function. The difference with the ordinary TAb is that the animation effect is added. It is mostly used for product websites and product classification functions, however, other websites can also be used. Click to run it and you will know its mysteries. It uses JavaScript to simulate the Flash animation effect, which is very appropriate.
<HEAD> <TITLE> CSS + Javascript: Create an animated tab-helper's house </TITLE> <meta http-equiv = "Content-Type" content = "text/html; charset = GBK "> <style language =" javascript "> </style> </HEAD> <BODY> <script language =" JavaScript "> <! -- Var speed = 10; // speed var ci = 10; // Number of motion times var left = 0; // The left position of the box var top = 0; // The position on the box is var width = 0; // The width of the box is var height = 0; // The height of the box is var aimleft = 0; // The left position of the target is var aimtop = 0; // var aimwidth = 0; // var aimheight = 0; // var lb = 0; // left step var tb = 0; // The upper step var wb = 0; // The width step var hb = 0; // The height step var fk = null; var aim = null; var aim1 = null; function initObj (oid) {if (! Fk) {fk = document. getElementById ('fk ');} if (! Aim) {aim = document. getElementById ('aim ');} if (! Aim1) aim1 = document. getElementById ('aim1'); if (oid) append (fk, document. getElementById (oid), true);} function append (o, oc, cloned) {while (o. hasChildNodes () o. removeChild (o. firstChild); if (cloned) oc = oc. cloneNode (true); oc. className = 'show'; o. appendChild (oc);} function setSource (obj, oid) {initObj (oid); left = getOffset (obj ). left; top = getOffset (obj ). top; width = obj. offsetWidth; height = obj. offsetHeight; ai Mleft = getOffset (aim ). left; aimtop = getOffset (aim ). top; aimwidth = aim. offsetWidth; aimheight = aim. offsetHeight; fk. style. display = ''; clearInterval (MyMar);}/*** set the direction step, width and height step */function setStep () {lb = (aimleft-left)/ci; tb = (aimtop-top)/ci; wb = (aimwidth-width)/ci; hb = (aimheight-height)/ci ;} /*** move */function move () {setStep (); left + = lb; top + = tb; width + = wb; height + = hb; if (left | aimleft-2 | top <aimtop-2 | wi Dth <aimwidth-2 | height <aimheight-2) {fk. style. left = left + "px"; fk. style. top = top + "px"; fk. style. width = width + "px"; fk. style. height = height + "px";} else {if (fk) while (fk. hasChildNodes () {append (aim1, fk. firstChild) ;}hiddenfk (); clearInterval (MyMar) }} function hiddenFK () {initObj (); fk. style. display = 'none';}/*** get the position of an element on the page relative to the top left vertex of the page */function getOffset (obj) {var offsetleft = obj. offsetLeft; var offsettop = Obj. offsetTop; while (obj. offsetParent! = Document. body) {obj = obj. offsetParent; offsetleft + = obj. offsetLeft; offsettop + = obj. offsetTop;} return {Left: offsetleft, Top: offsettop };} var MyMar = setInterval (move, speed ); // --> </SCRIPT> <div id = "fk" style = "position: absolute; width: 46px; height: 20px; border: 1px solid #000000; display: none "> </div> <TABLE style =" border: 1px solid #666666 "cellspacing = 1 bgcolor = # ff1111 cellpadding = 4 border = 0> <TR bgcolor = # ffffff> <TD onClick =" setSource (this, 't1 '); myMar = setInterval (move, speed) "> ASP </TD> <TD onClick =" setSource (this, 't2'); {MyMar = setInterval (move, speed )} "> PHP </TD> <TD onClick =" setSource (this, 't3 '); {MyMar = setInterval (move, speed)} "> ASP. NET </TD> <TD onClick = "setSource (this, 't4 '); {MyMar = setInterval (move, speed )} "> JSP </TD> <TD onClick =" setSource (this, 't5 '); {MyMar = setInterval (move, speed )} "> AJAX </TD> <TD onClick =" setSource (this, 't6 '); {MyMar = setInterval (move, speed )} "> DELPHI </TD> </TR> </TABLE> <br> <TABLE id =" aim" style = "border: 1px solid #666666; width: 227px; height: 300px; "> <TR> <TD id = 'aim1' valign =" top "> </TD> </TR> </TABLE> <br> <br> <TABLE style = "border: 1px solid #666666 "cellspacing = 1 bgcolor = # ff1111 cellpadding = 4 border = 0> <TR bgcolor = # ffffff> <TD onClick =" setSource (this, 't1 '); myMar = setInterval (move, speed) "> ASP </TD> <TD onClick =" setSource (this, 't2'); {MyMar = setInterval (move, speed )} "> PHP </TD> <TD onClick =" setSource (this, 't3 '); {MyMar = setInterval (move, speed)} "> ASP. NET </TD> <TD onClick = "setSource (this, 't4 '); {MyMar = setInterval (move, speed )} "> JSP </TD> <TD onClick =" setSource (this, 't5 '); {MyMar = setInterval (move, speed )} "> AJAX </TD> <TD onClick =" setSource (this, 't6 '); {MyMar = setInterval (move, speed )} "> DELPHI </TD> </TR> </TABLE> <div id =" t1 "class =" hidden "> ASP </div> <div id =" t2" class = "hidden"> PHP </div> <div id = "t3" class = "hidden"> ASP. NET </div> <div id = "t4" class = "hidden"> JSP </div> <div id = "t5" class = "hidden"> AJAX </div> <div id = "t6" class = "hidden"> DELPHI </div> </BODY> <br/> <center> more tutorials, visit: <a href = http://www.bkjia.com/ Target = _ blank _ fcksavedurl =" http://www.bkjia.com/ Target = _ blank "> http://www.bkjia.com/ </A> </center>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
