JavaScript实现商品分类与搜索栏交互提示效果
作者：小括号时间：2026-10-22 00:05:54浏览：560
本文介绍如何使用JavaScript实现一个用户交互效果：当用户点击商品分类时，通过动态定位一个指示框指向搜索栏，直观展示分类选择对搜索区域的影响。文章包含代码示例及在Firefox浏览器下的兼容性处理说明，旨在提升人机交互的友好度。
商品分类与搜索栏交互提示实现
本示例的核心目标是实现一种人机交互反馈：当用户点击商品分类时，界面中会出现一个指示方框，该方框会指向搜索栏的位置。这一视觉提示旨在清晰地向用户传达当前操作（点击分类）所引发的界面变化，即搜索栏区域的状态或内容发生了改变。
转载请注明出处 blueidea
核心代码实现与兼容性处理
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>方框移动</TITLE> <style language="javascript"> <!-- body, td{ font-size: 9pt; } --> </style> </HEAD> <BODY> <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 全选 注:引入外部Js需再刷新一下页面才能执行]
测试反馈显示该效果视觉表现良好，但在Firefox浏览器中存在少量兼容性问题，目前该问题已修复。此案例已被加精推荐。
<!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"> <!-- body, td{ font-size: 9pt; } --> </style> </HEAD> <BODY> <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 全选 注:引入外部Js需再刷新一下页面才能执行]
1
23下一页阅读全文
作者最新文章
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18