Community Learn Tools Library Leisure
search
English
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中文网
Release： 2016-05-16 19:13:20
Original
1068 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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.

Related labels：
推荐js实现商品分类到搜索栏友好提示（人机交互）
source：php.cn
Previous article：How to use attachEvent and pass parameters [IE|firefox]_javascript skills Next article：Several top-notch javascript compression and obfuscation tools_javascript skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2253
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2392
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2005
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1892
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1957
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template