本文介绍如何使用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下一页阅读全文