中間的表格代表搜尋表單，要實現的是點商品分類後有一個方框指向到搜尋欄，用以清楚地告訴使用者：點商品分類後是哪裡改變了
轉載請註明出處 blueidea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>方框移動</tITLE> <style language="javascript"> <!-- body, td{ font-size: 9pt; } --> </style> </hEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var speed=10;//速度 var ci = 10;//運動次數 var left=0;//方框左位置 var top=0;//方框上位置 var width=0;//方框寬 var height=0;//方框高 var aimleft=0;//目標左位置 var aimtop=0;//目標上位置 var aimwidth=0;//目標寬 var aimheight=0;//目標高 var lb=0;//左步長 var tb=0;//上步長 var wb=0;//寬步長 var hb=0;//高步長 /* * 取得對象位置、大小 * 取得目標對象位置、大小 */ function setSource(obj){ left = getOffset(obj).Left; top = getOffset(obj).Top; width = obj.offsetWidth; height = obj.offsetHeight; aimleft = getOffset(aim).Left; aimtop = getOffset(aim).Top; aimwidth = aim.offsetWidth; aimheight = aim.offsetHeight; fk.style.display=''; } /** * 設定方向步長、寬高步長 */ function setStep(){ lb = (aimleft-left)/ci; tb = (aimtop-top)/ci; wb = (aimwidth-width)/ci; hb = (aimheight-height)/ci; } /** * 移動 */ function move(){ setStep(); left+=lb; top+=tb; width+=wb; height+=hb; if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){ fk.style.posLeft = left; fk.style.posTop = top; fk.style.posWidth = width; fk.style.posHeight = height; }else{ hiddenFK(); function() {clearInterval(MyMar)} } } function hiddenFK(){ fk.style.display='none'; } /** * 取得某元素在頁面中相對頁面左上頂點的位置 */ 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" ></div> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">筆記本</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">電冰箱</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> </tR> </tABLE> <TABLE id="aim" > <TR> <TD></tD> </tR> </tABLE> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">筆記本</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">電冰箱</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家電</tD> </tR> </tABLE> </bODY> </hTML>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
呵呵，效果很棒，不過在ff下有些小問題，已經改了。加精
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>方框移動</tITLE> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style language="javascript"> <!-- body, td{ font-size: 9pt; } --> </style> </hEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var speed=10;//速度 var ci = 10;//運動次數 var left=0;//方框左位置 var top=0;//方框上位置 var width=0;//方框寬 var height=0;//方框高 var aimleft=0;//目標左位置 var aimtop=0;//目標上位置 var aimwidth=0;//目標寬 var aimheight=0;//目標高 var lb=0;//左步長 var tb=0;//上步長 var wb=0;//寬步長 var hb=0;//高步長 var fk = null; var aim = null; function initObj(){ if (!fk){fk = document.getElementById('fk');} if (!aim){aim = document.getElementById('aim');} } /* * 取得對象位置、大小 * 取得目標對象位置、大小 */ function setSource(obj){ initObj(); left = getOffset(obj).Left; top = getOffset(obj).Top; width = obj.offsetWidth; height = obj.offsetHeight; aimleft = getOffset(aim).Left; aimtop = getOffset(aim).Top; aimwidth = aim.offsetWidth; aimheight = aim.offsetHeight; fk.style.display=''; clearInterval(MyMar); } /** * 設定方向步長、寬高步長 */ function setStep(){ lb = (aimleft-left)/ci; tb = (aimtop-top)/ci; wb = (aimwidth-width)/ci; hb = (aimheight-height)/ci; } /** * 移動 */ function move(){ setStep(); left+=lb; top+=tb; width+=wb; height+=hb; if(left<aimleft-2 || top<aimtop-2 || width<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{ hiddenFK(); clearInterval(MyMar) } } function hiddenFK(){ initObj(); fk.style.display='none'; } /** * 取得某元素在頁面中相對頁面左上頂點的位置 */ 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" ></div> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD onClick="setSource(this);MyMar=setInterval(move,speed)">筆記本</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">電冰箱</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> </tR> </tABLE> <TABLE id="aim" > <TR> <TD></tD> </tR> </tABLE> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">筆記本</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">電冰箱</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> <TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家電</tD> </tR> </tABLE> </bODY> </hTML>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
當前1/3頁
123下一頁閱讀全文
