APP
<HEAD>
<TITLE>方框移動</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
body, td{
?font-size: 9pt;
}
.hidden{display:none;}
.show{display:block;}
-->
</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;
var aim1 = null;
function initObj(oid){
?if (!fk){fk = document.getElementById('fk');}
?if (!aim){aim = document.getElementById('aim');}
?if (!aim1)aim1 = document.getElementById('aim1');
//?while (fk.hasChildNodes())fk.removeChild(fk.firstChild);
?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;
?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{
??if (fk)
???while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
??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" 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)">筆記本</TD>
?<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">電冰箱</TD>
?<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
?<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家電</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
?<TD id='aim1' valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<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)">筆記本</TD>
?<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">電冰箱</TD>
?<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
?<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家電</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">第1個div</div>
<div id="t2" class="hidden">第2個div</div>
<div id="t3" class="hidden">第3個div</div>
<div id="t4" class="hidden">第4個div</div>
<div id="t5" class="hidden">第5個div</div>
<div id="t6" class="hidden">第6個div</div>
</BODY>
<TITLE>方框移動</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
body, td{
?font-size: 9pt;
}
.hidden{display:none;}
.show{display:block;}
-->
</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;
var aim1 = null;
function initObj(oid){
?if (!fk){fk = document.getElementById('fk');}
?if (!aim){aim = document.getElementById('aim');}
?if (!aim1)aim1 = document.getElementById('aim1');
//?while (fk.hasChildNodes())fk.removeChild(fk.firstChild);
?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;
?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{
??if (fk)
???while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
??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" 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)">筆記本</TD>
?<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">電冰箱</TD>
?<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
?<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家電</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
?<TD id='aim1' valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<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)">筆記本</TD>
?<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">電冰箱</TD>
?<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
?<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家電</TD>
?<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家電</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">第1個div</div>
<div id="t2" class="hidden">第2個div</div>
<div id="t3" class="hidden">第3個div</div>
<div id="t4" class="hidden">第4個div</div>
<div id="t5" class="hidden">第5個div</div>
<div id="t6" class="hidden">第6個div</div>
</BODY>
?
?
?
?
本文摘自 ：https://blog.51cto.com/u
