cari

Rumah  >  Artikel  >  hujung hadapan web  >  推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧

推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页_javascript技巧

PHP中文网
PHP中文网asal
2016-05-16 19:13:201039semak 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=&#39;&#39;; 
} 

/** 
* 设置方向步长、宽高步长 
*/ 
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=&#39;none&#39;; 
} 

/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
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(&#39;fk&#39;);} 
    if (!aim){aim = document.getElementById(&#39;aim&#39;);} 
} 
/* 
* 取得对象位置、大小 
* 取得目标对象位置、大小 
*/ 
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=&#39;&#39;; 
    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=&#39;none&#39;; 
} 

/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
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(&#39;fk&#39;);} 
    if (!aim){aim = document.getElementById(&#39;aim&#39;);} 
} 
/* 
* 取得对象位置、大小 
* 取得目标对象位置、大小 
*/ 
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=&#39;&#39;; 
    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=&#39;none&#39;; 
} 

/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
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(&#39;fk&#39;);} 
    if (!aim){aim = document.getElementById(&#39;aim&#39;);} 
} 
/* 
* 取得对象位置、大小 
* 取得目标对象位置、大小 
*/ 
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=&#39;&#39;; 
    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=&#39;none&#39;; 
} 

/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
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=&#39;&#39;; 
} 

/** 
* 设置方向步长、宽高步长 
*/ 
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=&#39;none&#39;; 
} 

/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
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