[原创]商品分类到搜索栏友好提示（人机交互）
中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了<span style="color: rgb(255, 102, 0);"> 转载请注明出处:
<div style="padding: 4px 5.4pt; width: 95%;">http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<html>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<HEAD>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<TITLE>方框移动</TITLE>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<meta http-equiv="Content-Type" content="text/html; charset=GBK">
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif<style language="javascript">...
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif<!--
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifbody, div{...}{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif font-size: 9pt;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giful {...}{ margin:0; padding:0}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifli {...}{ width:50px; background:#fff; float:left; cursor:pointer; border:1px solid #f11; text-align:center ; margin:3px; display:block}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif-->
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</style>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</HEAD>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<BODY>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif<SCRIPT LANGUAGE="JavaScript">...
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif<!--
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar speed=10;//速度
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar ci = 10;//运动次数
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar left=10;//方框左位置
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar top=20;//方框上位置
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar width=0;//方框宽
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar height=0;//方框高
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar aimleft=0;//目标左位置
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar aimtop=0;//目标上位置
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar aimwidth=0;//目标宽
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar aimheight=0;//目标高
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar lb=0;//左步长
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar tb=0;//上步长
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar wb=0;//宽步长
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar hb=0;//高步长
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar fk = null;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvar aim = null;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction initObj()...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif if (!fk)...{fk = document.getElementById('fk');}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif if (!aim)...{aim = document.getElementById('aim');}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif/**//*
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif* 取得对象位置、大小
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif* 取得目标对象位置、大小
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif*/
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction setSource(obj)...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif initObj();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif left = getOffset(obj).Left;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif top = getOffset(obj).Top;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif width = obj.offsetWidth;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif height = obj.offsetHeight;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif aimleft = getOffset(aim).Left;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif aimtop = getOffset(aim).Top;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif aimwidth = aim.offsetWidth;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif aimheight = aim.offsetHeight;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.display='';
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif clearInterval(MyMar);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif/**//**
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif* 设置方向步长、宽高步长
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif*/
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction setStep()...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif lb = (aimleft-left)/ci;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif tb = (aimtop-top)/ci;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif wb = (aimwidth-width)/ci;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif hb = (aimheight-height)/ci;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif/**//**
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif* 移动
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif*/
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction move()...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif setStep();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif left+=lb;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif top+=tb;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif width+=wb;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif height+=hb;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2)...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.left = left+"px";
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.top = top+"px";
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.width = width+"px";
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.height = height+"px";
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif }else...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif hiddenFK();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif clearInterval(MyMar)
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction hiddenFK()...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif initObj();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif fk.style.display='none';
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif/**//**
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif* 取得某元素在页面中相对页面左上顶点的位置
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif*/
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunction getOffset(obj)...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif var offsetleft = obj.offsetLeft;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif var offsettop = obj.offsetTop;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif while (obj.offsetParent != document.body)
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif ...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
页:
[1]