Maison >interface Web >js tutoriel >推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧
推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧
- PHP中文网original
- 2016-05-16 19:13:201069parcourir
中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了
<!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的值。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：attachEvent的使用方法与传递参数[IE|firefox]_javascript技巧Article suivant：几款极品的javascript压缩混淆工具_javascript技巧
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript