JS+CSS但分類動(dòng)態(tài)選擇及移動(dòng)功能

2024-09-05 12:20:27

字體：大中小

供稿：網(wǎng)友

這是一個(gè)類似選項(xiàng)卡功能的選擇插件，與普通的TAb區(qū)別是加入了動(dòng)畫(huà)效果，多用于商品類網(wǎng)站，用作商品分類功能，不過(guò)其它網(wǎng)站也可以用，點(diǎn)擊運(yùn)行一下你會(huì)知道它的奧妙，它用JavaScript模擬出了Flash動(dòng)畫(huà)的效果，很貼切。

<HEAD><TITLE>JS+CSS商品動(dòng)態(tài)選擇及移動(dòng)功能</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;//運(yùn)動(dòng)次數(shù)var left=0;//方框左位置var top=0;//方框上位置var width=0;//方框?qū)抳ar height=0;//方框高var aimleft=0;//目標(biāo)左位置var aimtop=0;//目標(biāo)上位置var aimwidth=0;//目標(biāo)寬var aimheight=0;//目標(biāo)高var lb=0;//左步長(zhǎng)var tb=0;//上步長(zhǎng)var wb=0;//寬步長(zhǎng)var hb=0;//高步長(zhǎng)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);}/*** 設(shè)置方向步長(zhǎng)、寬高步長(zhǎng)*/function setStep(){	lb = (aimleft-left)/ci;	tb = (aimtop-top)/ci;	wb = (aimwidth-width)/ci;	hb = (aimheight-height)/ci;}/*** 移動(dòng)*/function move(){	setStep();	left+=lb;	top+=tb;	width+=wb;	height+=hb;	if(left</SCRIPT><div   class="iwvjtn8m0"   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   class="iwvjtn8m0"   id="t1" class="hidden">ASP</div><div   class="iwvjtn8m0"   id="t2" class="hidden">PHP</div><div   class="iwvjtn8m0"   id="t3" class="hidden">ASP.NET</div><div   class="iwvjtn8m0"   id="t4" class="hidden">JSP</div><div   class="iwvjtn8m0"   id="t5" class="hidden">AJAX</div><div   class="iwvjtn8m0"   id="t6" class="hidden">DELPHI</div></BODY>

上一篇：仿QQ的菜單，三級(jí)豎向

下一篇：JS模擬的QQ面板上的多級(jí)可展開(kāi)的菜單