当前位置：网站综合首页 >> 网页JS特效 >> 浏览器窗口 >> 商品分类到搜索栏友好提示(人机交互)

商品分类到搜索栏友好提示(人机交互)

来源：中国设计秀作者：点击：81 加入收藏发表评论

顶一下

点击下面的运行，可预览效果。
代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>中国设计秀Cnwebshow.com/方框移动</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<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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2007-08-22 14:54:00 出处：

本文引用地址：http://www.cnwebshow.com/site/html/article_1095.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板