Rumah >hujung hadapan web >tutorial js >推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧
推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧
- PHP中文网asal
- 2016-05-16 19:13:201068semak imbas
中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了
<!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>
<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;//高步长
/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
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.posLeft = left;
fk.style.posTop = top;
fk.style.posWidth = width;
fk.style.posHeight = height;
}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>
<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>呵呵，效果很棒，不过在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">
<!--
body, td{
font-size: 9pt;
}
-->
</style>
</HEAD>
<BODY>
<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 = 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)
{
obj = obj.offsetParent;
offsetleft += obj.offsetLeft;
offsettop += obj.offsetTop;
}
return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</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>给加了个鼠标提示
改成div后
<html>
<HEAD>
<TITLE>方框移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
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>
<SCRIPT LANGUAGE="JavaScript">
<!--
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)
{
obj = obj.offsetParent;
offsetleft += obj.offsetLeft;
offsettop += obj.offsetTop;
}
return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</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>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">
<!--
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>
<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 = 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)
{
obj = obj.offsetParent;
offsetleft += obj.offsetLeft;
offsettop += obj.offsetTop;
}
return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</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>加了渐变背景色后速度慢了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<style language="javascript">
<!--
body, td{
font-size: 9pt;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#999999);
}
-->
</style>
</HEAD>
<BODY>
<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;//高步长
/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
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.posLeft = left;
fk.style.posTop = top;
fk.style.posWidth = width;
fk.style.posHeight = height;
}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>
<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>原理：
pixelTop和offsetTop是不一样的，pixelTop实际上是style.top的数字形式。而offsetTop是该对象实际上的偏移量。
而在一开始，这个fk对象的top是undefined的，未定义，所以pixelTop为0，而offsetTop由于body的margin的存在而不是0，实际上就是margin的值。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：attachEvent的使用方法与传递参数[IE|firefox]_javascript技巧Artikel seterusnya：几款极品的javascript压缩混淆工具_javascript技巧
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional