- <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>
- <TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
- <TR>
- <TD id='aim1' valign="top"></TD>
- </TR>
- </TABLE>
- <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>
复制代码 |