中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了
转载请注明出处:
转载请注明出处:
<
html
>
< HEAD >
< TITLE > 方框移动 </ TITLE >
< meta http-equiv ="Content-Type" content ="text/html; charset=GBK" >
< style language ="javascript" > ...
<!--
body, div{...}{
font-size: 9pt;
}
ul {...}{ margin:0; padding:0}
li {...}{ width:50px; background:#fff; float:left; cursor:pointer; border:1px solid #f11; text-align:center ; margin:3px; display:block}
-->
</ style >
</ HEAD >
< BODY >
< SCRIPT LANGUAGE ="JavaScript" > ...
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=10;//方框左位置
var top=20;//方框上位置
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)
...{
< HEAD >
< TITLE > 方框移动 </ TITLE >
< meta http-equiv ="Content-Type" content ="text/html; charset=GBK" >
< style language ="javascript" > ...
<!--
body, div{...}{
font-size: 9pt;
}
ul {...}{ margin:0; padding:0}
li {...}{ width:50px; background:#fff; float:left; cursor:pointer; border:1px solid #f11; text-align:center ; margin:3px; display:block}
-->
</ style >
</ HEAD >
< BODY >
< SCRIPT LANGUAGE ="JavaScript" > ...
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=10;//方框左位置
var top=20;//方框上位置
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)
...{