打印

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

赛扬 [楼主]

别人赛马我赛羊

荣誉管理团队

帖子: 1121
体力: 3933
威望: 117
离线: 2 天

1^# 大中小发表于 2007-3-4 14:48

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

转载请注明出处

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<style language="javascript">

</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">笔记本</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">笔记本</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

[ 本帖最后由赛扬于 2007-3-5 16:27 编辑 ]

安静，安静

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

psart

初级会员

帖子: 71
体力: 145
威望: 0
离线: 184 天

2^# 大中小发表于 2007-3-4 15:03

谢谢！收藏待用。

中国八景旅游网

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

ahuinan

阿会楠

高级会员

帖子: 467
体力: 973
威望: 1
当前: 广东广州
离线: 1 天

专长 JS,ASP,.NET

3^# 大中小发表于 2007-3-4 15:09

不错。。。。

sosuo8.com

TOP

请大家尊重和保护奥运知识产权。

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

4^# 大中小发表于 2007-3-6 09:10

呵呵，效果很棒，不过在ff下有些小问题，已经改了。加精

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">

</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);MyMar=setInterval(move,speed)">笔记本</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">笔记本</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);{MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

xwzsky

武者

中级会员

帖子: 162
体力: 291
威望: 0
离线: 11 天

5^# 大中小发表于 2007-3-6 09:40

很漂亮……的效果……

TOP

chyf1982

经典会员

银牌会员

帖子: 1237
体力: 2329
威望: 1
离线: 3 天

6^# 大中小发表于 2007-3-6 10:07

给加了个鼠标提示

改成div后

提示：您可以先修改部分代码再运行

var left=10;//方框左位置
var top=20;//方框上位置

不知道这2个定义的具体的用途是什么？
在严格认证下面，不论怎么调整都是相差了10个PX左右的位差，不知何故？
貌似改过大小之后对效果没有影响。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>方框移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">

</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 chyf1982 于 2007-3-6 10:18 编辑 ]

态度决定一切电影下载

TOP

marvellous

金翅擘海

版主

帖子: 11399
体力: 26524
威望: 140

7^# 大中小发表于 2007-3-6 10:13

加了渐变背景色后速度慢了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<style language="javascript">

</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<center>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none">rerererer</div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">爱老虎油</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">野火寒烟 </TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">剑气凌人</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">火焰楼兰</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">萧萧小雨</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">筷子一根</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">心灵鼓手</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">心开风神 </TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">中国丫头 </TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">乱世狂闪</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">红心男孩</TD>
</TR>
</TABLE>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

chyf1982

经典会员

银牌会员

帖子: 1237
体力: 2329
威望: 1
离线: 3 天

8^# 大中小发表于 2007-3-6 10:19

回复 #7 marvellous 的帖子

难道滤镜用多了，影响了JS的运行效率？

态度决定一切电影下载

TOP

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

9^# 大中小发表于 2007-3-6 10:40

to 飞飞：

呵呵，你的那偏移10px的问题只要设置body的margin=0即可。

原理：
pixelTop和offsetTop是不一样的，pixelTop实际上是style.top的数字形式。而offsetTop是该对象实际上的偏移量。

而在一开始，这个fk对象的top是undefined的，未定义，所以pixelTop为0，而offsetTop由于body的margin的存在而不是0，实际上就是margin的值。

你如果有看我修改的pj的菜单代码，你也会看到类似的针对原来pixelTop的hack：
http://bbs.blueidea.com/thread-2722578-1-1.html

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

chyf1982

经典会员

银牌会员

帖子: 1237
体力: 2329
威望: 1
离线: 3 天

10^# 大中小发表于 2007-3-6 11:40

回复 #9 Sheneyan 的帖子

感谢啊。。。

还有一个问题没有解决

var left=10;//方框左位置
var top=20;//方框上位置

这2个的具体作用是什么？没看明白

态度决定一切电影下载

TOP

csshtm

初级会员

帖子: 50
体力: 106
威望: 0
离线: 344 天

11^# 大中小发表于 2007-3-7 02:41

有特色有创意 , 兼容是通往无障碍的美好世界 , 要是点连接能显示不同内容就更理想

TOP

赛扬 [楼主]

别人赛马我赛羊

荣誉管理团队

帖子: 1121
体力: 3933
威望: 117
离线: 2 天

12^# 大中小发表于 2007-3-7 08:58

感谢Sheneyan的修改

to chyf1982：
现在不需要加cursor:hand，只是有效果即可，因为在实际使用中界面的将有很多不同的样式，有的人会把商品分类做成轮替换图片，有的人会做成用ＣＳＳ换背景色，有的人会在里面的文字上加链接，有人会给方框设背景色/加透明度

to chyf1982：
left 与 top 是用来保存方框位置的变量，每次循环中重新设定方框位置都是靠它

to csshtm：
模拟表单的方框里的内容就是要变化的，就是怕有些用户没看出来哪里变化了，以为点了商品分类后没有任何效果就把商品分类当成了虚设，所以我制作了这个效果用以提示用户．

安静，安静

TOP

zyz995

初级会员

帖子: 28
体力: 63
威望: 0
离线: 455 天

13^# 大中小发表于 2007-3-8 11:20

存起来，让它升值!

TOP

wwwsu

初级会员

帖子: 58
体力: 147
威望: 0
离线: 9 天

14^# 大中小发表于 2007-3-15 08:49

不错不错,存起来，让它升值!

TOP

3120110

初级会员

帖子: 87
体力: 192
威望: 0
当前: 湖南长沙
离线: 1 天

15^# 大中小发表于 2007-3-15 14:34

非常经典。收藏，谢谢

TOP

coffeekor

中级会员

帖子: 158
体力: 242
威望: 0
离线: 117 天

16^# 大中小发表于 2007-4-21 00:31

赞楼主一个！不过有个问题：如何让点击栏目出来的新内容出现在最上面呢，好像目前点击出现新内容后与中间的重合后就没有了。楼主请教！

TOP

kdfa

新手上路

帖子: 5
体力: 11
威望: 0
离线: 28 天

17^# 大中小发表于 2007-5-3 13:32

漂亮！如何让点击栏目出来的新内容出现在最上面呢？请教！

TOP

mallee

老李飞砖

银牌会员

帖子: 644
体力: 1170
威望: 2
当前: 河北秦皇岛
离线: 1 天

18^# 大中小发表于 2007-5-3 16:09

引用:

原帖由 kdfa 于 2007-5-3 13:32 发表
漂亮！如何让点击栏目出来的新内容出现在最上面呢？请教！

改变下他的z-index的值就可以了吧！

iw3c.com

TOP

dan59

初级会员

帖子: 75
体力: 64
威望: 0
离线: 18 天

19^# 大中小发表于 2007-5-7 22:42

好东西，但是用在哪里呢？

我的MSN SPACE
spaces.msn.com/danielchen59/
团队的MSN SPACE
spaces.msn.com/51wdgroup/

TOP

coffeekor

中级会员

帖子: 158
体力: 242
威望: 0
离线: 117 天

20^# 大中小发表于 2007-5-8 01:34

引用:

原帖由 mallee 于 2007-5-3 16:09 发表

改变下他的z-index的值就可以了吧！

好像不行啊，劳烦详细请教啊

TOP

kdfa

新手上路

帖子: 5
体力: 11
威望: 0
离线: 28 天

21^# 大中小发表于 2007-5-18 10:16

会的说说，如何让点击不同栏目的内容更换显示在最上面

TOP

yolio2003

tcdona

初级会员

帖子: 43
体力: 100
威望: 0
当前: 江西南昌
离线: 20 天

专长 JS,PHP,Python

22^# 大中小发表于 2007-5-18 10:35

I love this
哈哈
呵呵

TOP

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

23^# 大中小发表于 2007-5-18 10:50

http://bbs.blueidea.com/thread-2744995-1-1.html

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

mubai1017

初级会员

帖子: 19
体力: 50
威望: 0
离线: 388 天

24^# 大中小发表于 2007-5-18 11:00

很不错,收藏备用。。。

TOP

zhengjay

初级会员

帖子: 39
体力: 86
威望: 0
离线: 10 天

25^# 大中小发表于 2007-5-18 14:13

好DD..

TOP

andyanmy

初级会员

帖子: 39
体力: 61
威望: 0
当前: 湖南湘西州
离线: 37 天

26^# 大中小发表于 2007-5-18 14:16

谢谢老大们

收藏了

TOP

jichenliang

新手上路

帖子: 2
体力: 4
威望: 0
离线: 20 天

27^# 大中小发表于 2007-5-19 20:08

个人觉得好像没有怎么提高用户体验！，不过效果酷，赞一个

TOP

xmg123456

新手上路

帖子: 7
体力: 16
威望: 0
离线: 453 天

28^# 大中小发表于 2007-5-21 18:51

作了一点改动，现在可以兼容ff了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<style language="javascript">

</style>
</HEAD>
<BODY>
<div id="fk1" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">笔记本</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">笔记本</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">电冰箱</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">波比娃娃</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
	<TD onClick="setSource(this);function(){MyMar=setInterval(move,speed)}">小家电</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=0;//方框左位置
var top=0;//方框上位置
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=document.getElementById("fk1")
/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
function setSource(obj){
	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='';
}
/**
* 设置方向步长、宽高步长
*/
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();
		function() {clearInterval(MyMar)}
	}
}
function hiddenFK(){
	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>

提示：您可以先修改部分代码再运行

小马哥

TOP

Sheneyan

子虚乌有

超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门
离线: 45 天

专长 JS,JAVA,Oracle

29^# 大中小发表于 2007-5-21 18:59

那个啥。。我在上面已经改了。。