本文實例講述了JS實現的簡潔縱向滑動菜單(滑動門)效果。分享給大家供大家參考，具體如下：

這是一款縱向布局的CSS+JavaScript滑動門代碼，相當簡潔的手法來實現，如果對顏色不滿意，你可以試著自己修改CSS代碼，這個滑動門將每一個“門”的內容存入JS數組中，這樣可以減少代碼量，但也帶來了一個擴展的問題，擴展性方面有待完善，僅供參考。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

縱向滑動門

td,a,body{font-size:9pt;}

/*--選中的情況下*/

.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000}

/*未選中時邊框顏色*/

.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}

.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}

七星彩 排列五 籃球彩 足球彩

dsadsa?

var AroundInfoArray=new Array();

AroundInfoArray[0]="七星彩";

AroundInfoArray[1]="排列五";

AroundInfoArray[2]="籃球彩";

AroundInfoArray[3]="足球彩";

function ChangeFocus(obj)

{

for(i=0;i

{

if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)

{

document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";

document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];

}else{

document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";

}

}

}

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。