本文實例講述了JS+CSS實現分類動態選擇及移動功能效果代碼。分享給大家供大家參考，具體如下：
這是一個類似選項卡功能的選擇插件，與普通的TAb區別是加入了動畫效果，多用于商品類網站，用作商品分類功能，不過其它網站也可以用，點擊運行一下你會知道它的奧妙，它用JavaScript模擬出了Flash動畫的效果，很貼切。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-css-cha-type-move-style-demo/
具體代碼如下：
<HEAD><TITLE>JS+CSS商品動態選擇及移動功能</TITLE><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style language="javascript"><!--body, td{ font-size: 9pt;}.hidden{display:none;}.show{display:block;}--></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>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
