search

Home >Web Front-end >JS Tutorial >Recommended js to implement product classification into search bar friendly prompts (human-computer interaction) Page 1/3_javascript skills

Recommended js to implement product classification into search bar friendly prompts (human-computer interaction) Page 1/3_javascript skills

PHP中文网
PHP中文网Original
2016-05-16 19:13:201076browse

The middle table represents the search form. What needs to be realized is that after clicking on the product category, a box will point to the search bar to clearly tell the user: what has changed after clicking on the product category 

<!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>

Haha, the effect is great, but there are some minor problems under ff, which have been corrected. Add refinement

<!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>

Add a mouse prompt
After changing it to 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;//The left position of the box
var top= 20;//Position

on the box. I don’t know what the specific use of these two definitions is?
Under strict certification, no matter how you adjust it, there is a difference of about 10 PX. I don’t know why?
It seems that changing the size has no effect on the effect. 

<!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>

The speed is slower after adding a gradient background color: 

<!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>

Principle:
pixelTop and offsetTop are different, pixelTop is actually style. The numeric form of top. And offsetTop is the actual offset of the object.
At the beginning, the top of this fk object is undefined, so the pixelTop is 0, and the offsetTop is not 0 due to the existence of the body's margin, which is actually the value of the margin.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use attachEvent and pass parameters [IE|firefox]_javascript skillsNext article：How to use attachEvent and pass parameters [IE|firefox]_javascript skills

Related articles

See more