微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

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

PHP中文网
发布： 2016-05-16 19:13:20
原创
1120人浏览过

中间的表格代表搜索表单，要实现的是点商品分类后有一个方框指向到搜索栏，用以清楚地告诉用户：点商品分类后是哪里改变了

<!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>
登录后复制

加了渐变背景色后速度慢了：

纳米搜索
纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

纳米搜索 30
查看详情 纳米搜索 
<!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的值。

立即学习“Java免费学习笔记（深入）”；

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：attachEvent的使用方法与传递参数[IE|firefox]_javascript技巧 下一篇：几款极品的javascript压缩混淆工具_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
动态Turbo Stream内容权限控制：Stimulus与AJAX实现指南 本文详细介绍了在Rails应用中，如何利用Stimulus和AJAX解决TurboStreams实时更新内容时，服务端权限策略（如Pundit）无法直接生效的问题。通过在服务端引入辅助方法识别TurboStream请求，调整视图默认隐藏按钮，并创建Stimulus控制器监听TurboStream事件，客户端发起额外请求获取资源权限，从而动态控制用户界面元素的可见性。此方案确保了权限检查的准确性，并提供了清晰的实现步骤和代码示例。
2025-11-11 20:17:25
668
在Turbo Streams中实现基于用户权限的动态UI更新 本文旨在解决RailsTurboStreams与Pundit权限系统结合时，因服务器端渲染上下文限制导致权限检查失效的问题。我们将介绍一种基于StimulusJavaScript框架的客户端解决方案，通过拦截TurboStream渲染事件，异步请求资源权限，并根据权限动态调整UI元素（如编辑/删除按钮）的可见性，确保实时更新的用户界面权限控制准确无误。
2025-11-11 20:17:01
728
JavaScript实现下拉选择时区并实时显示时间及相关信息 本教程将指导您如何使用HTML、CSS和JavaScript构建一个交互式网页，实现通过下拉菜单选择不同时区，并实时显示该时区的当前时间。同时，页面将根据选择动态展示或隐藏与该时区相关的详细信息表格，确保用户界面的响应性和信息的直观呈现。
2025-11-11 20:04:21
973
CefSharp中嵌入Angular应用拖放功能失效的解决方案 在WPF应用中嵌入Angular前端时，使用CefSharp的自定义协议加载本地文件可能导致拖放功能（如dragstart、dragevent）失效。尽管其他脚本正常运行，但拖放操作会被CefSharp默认禁用。核心解决方案是在CefSharp的WebBrowser控件加载完成后，显式设置AllowDrop=true，以启用其内置的拖放处理机制，从而确保Angular应用的拖放行为能够正常响应。
2025-11-11 20:04:01
131
JavaScript中如何将扁平化对象拆分为结构化对象数组 本教程旨在解决JavaScript中将包含多组键值对的单一扁平化对象，根据键名前缀拆分为多个独立对象的数组问题。通过遍历原始对象的键，识别前缀并动态构建新对象，最终将单个复杂对象重构为一组清晰、独立的结构化对象，提升数据可读性和可维护性。
2025-11-11 19:59:02
516
将JavaScript中单行对象数组拆分为多行独立对象 本教程旨在解决JavaScript中一个常见的数据重构问题：如何将一个包含扁平化、多键值对的单行对象数组，转换为一个由多个独立对象组成的新数组。文章将详细介绍一种基于键名模式识别的实用方法，通过迭代原始对象的键，并根据键的特定前缀将相关数据分组，最终实现数据结构的有效转换，并提供完整的JavaScript代码示例与解释。
2025-11-11 19:58:10
323
TestCafe选择器与断言超时机制深度解析 TestCafe框架中，选择器超时（SelectorTimeout）和断言超时（AssertionTimeout）是两个独立且功能不同的机制。选择器超时用于等待页面元素出现，而断言超时则用于等待断言条件变为真。本文将深入探讨这两种超时的独立作用、配置方式，以及它们在实际测试场景中的协同行为，帮助开发者避免常见误解，更有效地编写健壮的自动化测试。
2025-11-11 19:44:01
719
怎样通过js脚本获取url参数_js URL参数获取与解析脚本教程 优先使用URLSearchParams解析参数，现代浏览器支持良好；若需兼容旧浏览器，则采用手动解析或自定义函数获取单个及所有参数。
2025-11-11 19:39:03
610
使用JavaScript处理对象数组：基于前一项值条件递增属性 本文将探讨如何使用JavaScript，特别是Array.prototype.map方法，高效地处理对象数组。核心目标是实现一个功能，当当前对象的特定属性值与前一个对象的相同属性值相等时，自动递增当前对象的该属性值，同时处理数组的首个元素。通过索引访问前一项，我们能够构建出灵活且可读的解决方案。
2025-11-11 19:32:12
324
JS如何调用SpringWebSocket服务_JS调用SpringWebSocket服务的完整教程 前端通过STOMPoverWebSocket与Spring后端通信，需引入sockjs-client和stompjs库；首先配置SpringWebSocket支持STOMP，定义端点如/ws、消息代理前缀/topic及应用前缀/app；前端使用SockJS连接/ws，通过Stomp.over建立STOMP客户端，连接成功后订阅/topic/greetings主题；调用stompClient.send("/app/hello",{},JSON.stringify(data))发送消息至后端@Con
2025-11-11 19:27:31
782
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部