当前位置：Gxlcms > JavaScript > 推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页

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

时间：2021-07-01 10:21:17 帮助过：7人阅读

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>方框移动</TITLE> 
<style language="javascript"> 
 
</style> 
</HEAD>

/* 
* 取得对象位置、大小 
* 取得目标对象位置、大小 
*/ 
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 
</SCRIPT>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
呵呵，效果很棒，不过在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"> 
 
</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 
</SCRIPT>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
123下一页阅读全文

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

人气教程排行