JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼
本文實例講述了JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼。分享給大家供大家參考,具體如下:
這是一個類似選項卡功能的選擇插件,與普通的TAb區(qū)別是加入了動畫效果,多用于商品類網(wǎng)站,用作商品分類功能,不過其它網(wǎng)站也可以用,點擊運行一下你會知道它的奧妙,它用JavaScript模擬出了Flash動畫的效果,很貼切。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/
具體代碼如下:
<HEAD> <TITLE>JS+CSS商品動態(tài)選擇及移動功能</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;//運動次數(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;//左步長 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); } /** * 設(shè)置方向步長、寬高步長 */ 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程序設(shè)計有所幫助。
- 鍵盤上下鍵移動選擇table表格行的js代碼
- JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法
- js實現(xiàn)的簡單radio背景顏色選擇器代碼
- js模擬淘寶網(wǎng)的多級選擇菜單實現(xiàn)方法
- js實現(xiàn)Select頭像選擇實時預(yù)覽代碼
- JS實現(xiàn)的5級聯(lián)動Select下拉選擇框?qū)嵗?/a>
- js實現(xiàn)的全國省市二級聯(lián)動下拉選擇菜單完整實例
- JS實現(xiàn)網(wǎng)頁游戲中滑塊響應(yīng)鼠標(biāo)點擊移動效果
- js判斷瀏覽器類型及設(shè)備(移動頁面開發(fā))
- JS和css實現(xiàn)檢測移動設(shè)備方向的變化并判斷橫豎屏幕
相關(guān)文章
???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系,map、mergeMap和switchMap是RxJS中的三個主要運算符,在SAP?Spartacus開發(fā)中有著廣泛的使用場景2022-07-07JS使用window.requestAnimationFrame()實現(xiàn)逐幀動畫
這篇文章介紹了JS使用window.requestAnimationFrame()實現(xiàn)逐幀動畫的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06用JavaScript檢查大寫鍵(Caps Lock)是否打開的腳本
用JavaScript檢查大寫鍵(Caps Lock)是否打開的腳本...2007-06-06javascript中的有名函數(shù)和無名函數(shù)
javascript中的有名函數(shù)和無名函數(shù)...2007-10-10使用base64對圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示
這篇文章主要介紹了使用base64對圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示的相關(guān)資料,需要的朋友可以參考下2017-01-01