本文介绍了一种通过JavaScript实现的动画效果，当点击商品分类时，一个方框会平滑移动到搜索栏的位置，清晰指示用户的操作效果。此方法使用了自定义的JavaScript函数来获取元素的位置和尺寸，并逐步调整该方框的位置。
中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了
转载请注明出处:
<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)
{
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>
<ul>
<li onClick="setSource(this);MyMar=setInterval(move,speed)">笔记本</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
</ul>
<div id="aim" style=" clear:left;border: 1px solid #666666 ; width: 227px; height: 300px; margin:20px 10px">
</div>
<ul>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">笔记本</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
<li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li>
</ul>
</BODY>
</HTML>
效果很不错得。希望能给大家一点好处！我是蓝色上的LOVELIUM有机会向大家学习呀！
转载请注明出处:
<html><HEAD><TITLE>方框移动</TITLE><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style language="javascript">
<!--body, div{
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) { 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><ul> <li onClick="setSource(this);MyMar=setInterval(move,speed)">笔记本</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li></ul><div id="aim" style=" clear:left;border: 1px solid #666666 ; width: 227px; height: 300px; margin:20px 10px"></div><ul> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">笔记本</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li> <li onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</li></ul></BODY></HTML>效果很不错得。希望能给大家一点好处！我是蓝色上的LOVELIUM有机会向大家学习呀！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
