本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：
这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，点击运行一下你会知道它的奥妙，它用JavaScript模拟出了Flash动画的效果，很贴切。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/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"></div> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD>ASP</TD> <TD>PHP</TD> <TD>ASP.NET</TD> <TD>JSP</TD> <TD>AJAX</TD> <TD>DELPHI</TD> </TR> </TABLE> <br><br> <br><br> <br><br> <TABLE id="aim"> <TR> <TD id='aim1' valign="top"></TD> </TR> </TABLE> <br> <br> <br> <br> <TABLE cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0> <TR bgcolor=#ffffff> <TD>ASP</TD> <TD>PHP</TD> <TD>ASP.NET</TD> <TD>JSP</TD> <TD>AJAX</TD> <TD>DELPHI</TD> </TR> </TABLE> <div id="t1">ASP</div> <div id="t2">PHP</div> <div id="t3">ASP.NET</div> <div id="t4">JSP</div> <div id="t5">AJAX</div> <div id="t6">DELPHI</div> </BODY>
希望本文所述对大家JavaScript程序设计有所帮助。
【JS+CSS实现分类动态选择及移动功能效果代码】相关文章：