请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › [原创]商品分类到搜索栏友好提示（人机交互）

发新帖

查看: 15436|回复: 29

[原创]商品分类到搜索栏友好提示（人机交互） [复制链接]

赛扬　楼主

别人赛马我赛羊

荣誉管理 

帖子: 1160
体力: 11060
威望: 118
居住地: 吉林省长春市

发表于 2007-3-4 14:48:45 |显示全部楼层

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

转载请注明出处

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<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;//高步长

/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
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>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<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>

提示：您可以先修改部分代码再运行

[ 本帖最后由赛扬于 2007-3-5 16:27 编辑 ]

安静，安静

西部数码顶级域名注册商39元抢注！

使用道具举报

帖子: 75
体力: 131
威望: 0

发表于 2007-3-4 15:03:51 |显示全部楼层

谢谢！收藏待用。

GodYe.Com

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

阿会楠

帖子: 522
体力: 2212
威望: 1
居住地: 广东省广州市

发表于 2007-3-4 15:09:21 |显示全部楼层

不错。。。。

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-3-6 09:10:25 |显示全部楼层

呵呵，效果很棒，不过在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<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>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<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>

提示：您可以先修改部分代码再运行

子叶：子乌的叶子
子乌书简

使用道具举报

武者

帖子: 181
体力: 675
威望: 0

发表于 2007-3-6 09:40:13 |显示全部楼层

很漂亮……的效果……

使用道具举报

经典会员

帖子: 1238
体力: 3352
威望: 1

发表于 2007-3-6 10:07:22 |显示全部楼层

给加了个鼠标提示

改成div后

<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=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">

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

提示：您可以先修改部分代码再运行

[ 本帖最后由 chyf1982 于 2007-3-6 10:18 编辑 ]

态度决定一切那飞的...

使用道具举报

金翅擘海

帖子: 16559
体力: 37158
威望: 143

发表于 2007-3-6 10:13:15 |显示全部楼层

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>方框移动</TITLE>
<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;//高步长

/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
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>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<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>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

使用道具举报

经典会员

帖子: 1238
体力: 3352
威望: 1

发表于 2007-3-6 10:19:53 |显示全部楼层

回复 #7 marvellous 的帖子

难道滤镜用多了，影响了JS的运行效率？

态度决定一切那飞的...

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-3-6 10:40:07 |显示全部楼层

to 飞飞：

呵呵，你的那偏移10px的问题只要设置body的margin=0即可。

原理：
pixelTop和offsetTop是不一样的，pixelTop实际上是style.top的数字形式。而offsetTop是该对象实际上的偏移量。

而在一开始，这个fk对象的top是undefined的，未定义，所以pixelTop为0，而offsetTop由于body的margin的存在而不是0，实际上就是margin的值。

你如果有看我修改的pj的菜单代码，你也会看到类似的针对原来pixelTop的hack：
http://bbs.blueidea.com/thread-2722578-1-1.html

子叶：子乌的叶子
子乌书简

使用道具举报

经典会员

帖子: 1238
体力: 3352
威望: 1

发表于 2007-3-6 11:40:17 |显示全部楼层

回复 #9 Sheneyan 的帖子

感谢啊。。。

还有一个问题没有解决

var left=10;//方框左位置
var top=20;//方框上位置

这2个的具体作用是什么？没看明白

态度决定一切那飞的...

使用道具举报

帖子: 93
体力: 524
威望: 0

发表于 2007-3-7 02:41:19 |显示全部楼层

有特色有创意 , 兼容是通往无障碍的美好世界 , 要是点连接能显示不同内容就更理想

使用道具举报

赛扬　楼主

别人赛马我赛羊

荣誉管理 

帖子: 1160
体力: 11060
威望: 118
居住地: 吉林省长春市

发表于 2007-3-7 08:58:01 |显示全部楼层

感谢Sheneyan的修改

to chyf1982：
现在不需要加cursor:hand，只是有效果即可，因为在实际使用中界面的将有很多不同的样式，有的人会把商品分类做成轮替换图片，有的人会做成用ＣＳＳ换背景色，有的人会在里面的文字上加链接，有人会给方框设背景色/加透明度

to chyf1982：
left 与 top 是用来保存方框位置的变量，每次循环中重新设定方框位置都是靠它

to csshtm：
模拟表单的方框里的内容就是要变化的，就是怕有些用户没看出来哪里变化了，以为点了商品分类后没有任何效果就把商品分类当成了虚设，所以我制作了这个效果用以提示用户．

安静，安静

使用道具举报

帖子: 28
体力: 68
威望: 0

发表于 2007-3-8 11:20:11 |显示全部楼层

存起来，让它升值!

使用道具举报

帖子: 69
体力: 248
威望: 0

发表于 2007-3-15 08:49:43 |显示全部楼层

不错不错,存起来，让它升值!

使用道具举报

帖子: 115
体力: 481
威望: 0
居住地: 湖南省长沙市

发表于 2007-3-15 14:34:23 |显示全部楼层

非常经典。收藏，谢谢

使用道具举报

帖子: 157
体力: 247
威望: 0

发表于 2007-4-21 00:31:45 |显示全部楼层

赞楼主一个！不过有个问题：如何让点击栏目出来的新内容出现在最上面呢，好像目前点击出现新内容后与中间的重合后就没有了。楼主请教！

使用道具举报

kdfa　

帖子: 6
体力: 18
威望: 0

发表于 2007-5-3 13:32:38 |显示全部楼层

漂亮！如何让点击栏目出来的新内容出现在最上面呢？请教！

使用道具举报

老李飞砖

帖子: 662
体力: 2394
威望: 2
居住地: 河北省秦皇岛市

发表于 2007-5-3 16:09:49 |显示全部楼层

原帖由 kdfa 于 2007-5-3 13:32 发表
漂亮！如何让点击栏目出来的新内容出现在最上面呢？请教！

改变下他的z-index的值就可以了吧！

使用道具举报

帖子: 74
体力: 147
威望: 0
居住地: 广东省深圳市

发表于 2007-5-7 22:42:41 |显示全部楼层

好东西，但是用在哪里呢？

我的MSN SPACE
spaces.msn.com/danielchen59/
团队的MSN SPACE
spaces.msn.com/51wdgroup/

使用道具举报

帖子: 157
体力: 247
威望: 0

发表于 2007-5-8 01:34:28 |显示全部楼层

原帖由 mallee 于 2007-5-3 16:09 发表

改变下他的z-index的值就可以了吧！

好像不行啊，劳烦详细请教啊

使用道具举报

kdfa　

帖子: 6
体力: 18
威望: 0

发表于 2007-5-18 10:16:53 |显示全部楼层

会的说说，如何让点击不同栏目的内容更换显示在最上面

使用道具举报

tcdona

帖子: 47
体力: 197
威望: 0
居住地: 江西省南昌市

发表于 2007-5-18 10:35:59 |显示全部楼层

I love this
哈哈
呵呵

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-5-18 10:50:58 |显示全部楼层

http://bbs.blueidea.com/thread-2744995-1-1.html

子叶：子乌的叶子
子乌书简

使用道具举报

帖子: 19
体力: 55
威望: 0

发表于 2007-5-18 11:00:38 |显示全部楼层

很不错,收藏备用。。。

使用道具举报

帖子: 41
体力: 159
威望: 0

发表于 2007-5-18 14:13:16 |显示全部楼层

好DD..

使用道具举报

帖子: 41
体力: 132
威望: 0
居住地: 湖南省湘西土家族苗族自治州

发表于 2007-5-18 14:16:25 |显示全部楼层

谢谢老大们

收藏了

使用道具举报

帖子: 2
体力: 22
威望: 0

发表于 2007-5-19 20:08:49 |显示全部楼层

个人觉得好像没有怎么提高用户体验！，不过效果酷，赞一个

使用道具举报

帖子: 7
体力: 21
威望: 0

发表于 2007-5-21 18:51:23 |显示全部楼层

作了一点改动，现在可以兼容ff了

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

</style>
</HEAD>

<BODY>

<div id="fk1" 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>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<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>
<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=document.getElementById("fk1")

/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
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.left = left+"px";
		fk.style.top = top+"px";
		fk.style.width = width+"px";
		fk.style.height = height+"px";
	}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>

提示：您可以先修改部分代码再运行

小马哥

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-5-21 18:59:40 |显示全部楼层

那个啥。。我在上面已经改了。。

子叶：子乌的叶子
子乌书简

使用道具举报

hanguodong2007　

果冻gege

帖子: 50
体力: 272
威望: 0
居住地: 北京市海淀区

发表于 2007-7-4 13:50:09 |显示全部楼层

不错．．真不错

努力学习中...

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 08:01 , Processed in 0.154243 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部