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

lovelium

浏览: 18888 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

我自己的

JavaScript HTML

中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了
转载请注明出处:

<html>

<HEAD>

<!--

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>

<!--

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)

{

分享到：

JavaScript中的私有成员 | 一段折叠代码，带记忆功能的

2007-03-08 13:43
浏览 761
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

javascript取一个控件在网页中的位置

一个循环问题

css星级效果总结 取别人另加入自己的一些东东

共享一个登陆效果，可能有用！

再发一个新潮的后台登陆效果，好东西共享！

共享一个仿阿里巴巴搜索效果,蛮漂亮的!

原创一个分页效果共享，思路应早就有了。

最近访客更多访客>>

css星级效果总结取别人另加入自己的一些东东