推荐js实现商品分类到搜索栏友好提示（人机交互）- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 推荐js实现商品分类到搜索栏友好提示（人机交互）

Javascript: JavaScript实现Sleep函数的代码; 一个可以显示阴历的JS代码; 从csdn弄下来的页面预先载入效果; 键盘事件中keyCode、which和charCode 的兼容性测试; 一个支持ff的modaldialog的js代码; [js+css]点击隐藏层,点击另外层不能隐藏原层; 用javascript实现页面打印的三种方法; HTML-CSS群中单选引发的“事件”; 一款不错的键盘密码输入js程序; 限制文本字节数js代码; 静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。; 用javascript动态调整iframe高度的方法; 用一段js程序来实现动画功能; javascript实现划词标记+划词搜索功能; javascript 简单高效判断数据类型系列函数 By shawl.qiu; 服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu; 禁止F5等快捷键的JS代码; 在textarea文本域中显示HTML代码的方法; Javascript之文件操作; 修改发贴的编辑功能

No. « ‹ 51 52 53 54 › »

技术文章搜索

关键字

Javascript 中的推荐js实现商品分类到搜索栏友好提示（人机交互）

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 174 ::

收藏到网摘: n/a

用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ] attachEvent的使用方法与传递参数[IE|firefox]

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

点击运行可以看到效果:

<!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>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR> <TD></TD>
</TR>
</TABLE>
<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

呵呵，效果很棒，不过在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>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR> <TD></TD>
</TR>
</TABLE>
<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

给加了个鼠标提示
改成div后

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:

<!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>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR> <TD></TD>
</TR>
</TABLE>
<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

原理：
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

用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ] attachEvent的使用方法与传递参数[IE|firefox]

Javascript 中的 推荐js实现商品分类到搜索栏友好提示（人机交互）

评论 (0) All

Javascript 中的推荐js实现商品分类到搜索栏友好提示（人机交互）