[原创]商品分类到搜索栏友好提示(人机交互)

中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了
转载请注明出处:
< 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)
    
...{
InBlock.gif
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值