每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

关闭顶部展开顶部

展开边栏关闭边栏

网页特效代码模板无忧>网页特效>菜单导航特效代码>

收藏分享查看评论菜单导航

JS+CSS但分类动态选择及移动功能_菜单导航特效

查看演示效果

特效Tag：选项卡 Tab 添加

缁囨ⅵDedeCMS瑙嗛鏁欑▼涔扮┖闂� 绉熸湇鍔″櫒閫夌綉纭曚簰鑱旓紒 鏃犲咖绔欓暱宸ュ叿,鐧惧害鏉冮噸涓€閿叏鏌�!

这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，点击运行一下你会知道它的奥妙，它用JavaScript模拟出了Flash动画的效果，很贴切。

<HEAD>
<TITLE>JS+CSS商品动态选择及移动功能</TITLE>
<meta http-equiv="Content-Type" mrc="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;
var aim1 = null;
function initObj(oid){
	if (!fk){fk = document.getElementById('fk');}
	if (!aim){aim = document.getElementById('aim');}
	if (!aim1)aim1 = document.getElementById('aim1');
	if (oid)
		append(fk,document.getElementById(oid),true);
}
function append(o,oc,cloned){
	while (o.hasChildNodes())o.removeChild(o.firstChild);
	if (cloned)oc = oc.cloneNode(true);
	oc.className = 'show';
	o.appendChild(oc);
}

function setSource(obj,oid){
	initObj(oid);
	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{
		if (fk)
			while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
		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,'t1');MyMar=setInterval(move,speed)">ASP</TD>
	<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD>
	<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD>
	<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD>
	<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD>
	<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
	<TD id='aim1' valign="top"></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,'t1');MyMar=setInterval(move,speed)">ASP</TD>
	<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD>
	<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD>
	<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD>
	<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD>
	<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">ASP</div>
<div id="t2" class="hidden">PHP</div>
<div id="t3" class="hidden">ASP.NET</div>
<div id="t4" class="hidden">JSP</div>
<div id="t5" class="hidden">AJAX</div>
<div id="t6" class="hidden">DELPHI</div>
</BODY>

所属频道：菜单导航特效/更新时间：2012-11-18

[收藏][报错][返回列表]

评论加载中....

相关菜单导航特效：

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索JS+CSS但分类动态选择及移动功能
特效说明：
菜单导航模板-JS+CSS但分类动态选择及移动功能。

鏀惰棌&鍒嗕韩

QQ绌洪棿鏂版氮寰崥鑵捐寰崥浜轰汉缃�寮€蹇冪綉鐧惧害鎼滆棌澶嶅埗缃戝潃鏇村...