這篇文章主要介紹了JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼,涉及JavaScript實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼。分享給大家供大家參考，具體如下：

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

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/

具體代碼如下：

<HEAD>
<TITLE>JS+CSS商品動(dòng)態(tài)選擇及移動(dòng)功能</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;//運(yùn)動(dòng)次數(shù)
var left=0;//方框左位置
var top=0;//方框上位置
var width=0;//方框?qū)?
var 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<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';
}
/**
* 取得某元素在頁(yè)面中相對(duì)頁(yè)面左上頂點(diǎn)的位置
*/
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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: