国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
Javascript教程下拉菜單全攻略之Javascript篇-Javascript教程下...

序言:

  隨著互聯(lián)網(wǎng)的普及和網(wǎng)頁制作技術(shù)的發(fā)展,越來越多的網(wǎng)友開始制作自己的網(wǎng)站。做為網(wǎng)站最重要的部分—導(dǎo)航菜單也出現(xiàn)了各式各樣的設(shè)計(jì)和制作方法。其中下拉式導(dǎo)航菜單已經(jīng)成為多欄目大信息量網(wǎng)站的首選導(dǎo)航方式。那么,在下面我將簡單介紹一下眾多下拉菜單制作方法中完全使用JS自動生成的“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”的工作原理和使用方法。

  1、S下拉菜單原理

  下拉菜單實(shí)際上就是在開始的時候顯示一級或者說是主菜單(圖一)。當(dāng)觸發(fā)條件(例如:鼠標(biāo)移動到上面時)顯示次級菜單(圖二)。




圖一



圖二

那么如何實(shí)現(xiàn)這樣的效果呢。其實(shí)很簡單。所有的下拉菜單都是通過圖層的顯隱來實(shí)現(xiàn)的。在文件下載的時候,其實(shí)主菜單和次級菜單都以經(jīng)形成或者說下載到了客戶端也就是你的機(jī)器里。只是次級菜單被隱藏起來。隱藏的方法一般是使用javascript配合css控制次級菜單的圖層的屬性visibility為隱藏。所以在開始的使用你是看不見次級菜單的。當(dāng)滿足觸發(fā)條件(例如:鼠標(biāo)移動到上面)時,在使用javascript來控制次級菜單顯示。當(dāng)在次滿足觸發(fā)條件時(例如:鼠標(biāo)移開),控制次級菜單隱藏。

  我們現(xiàn)在講的這個“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”可以自動適應(yīng)瀏覽器分辨率的改變始終保持相對位置??梢苑奖愕淖约憾ㄖ撇藛物@示內(nèi)容及連接頁面??梢噪S意擴(kuò)充主導(dǎo)航和次導(dǎo)航的欄目個數(shù)??梢宰杂筛淖冞B接和導(dǎo)航表格的樣式和外觀等等。

  2、"自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單"js代碼詳解

//---------------主導(dǎo)航條內(nèi)容------------//

varmainLayer=newArray("藍(lán)色理想","動意營造");//主導(dǎo)航欄目

//---------------次導(dǎo)航條內(nèi)容------------//

varsubLayer0=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目一下的次級欄目

varsubLayerHttp0=newArray("#","#");//主導(dǎo)航欄目一下的次級欄目連接地址

varsubLayer1=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目二的次級欄目

varsubLayerHttp1=newArray("#","#");//主導(dǎo)航欄目二的次級欄目連接地址

//---------------主導(dǎo)航條Table參數(shù)調(diào)整------------//

varmainTableTdWidth=100;//每個TD的寬度,調(diào)整主導(dǎo)航內(nèi)容間距

varmainTableBorder=0;//調(diào)整主導(dǎo)航表格邊框?qū)挾?

varmainTableCellspacing=0;//調(diào)整主導(dǎo)航表格Cellspacing

varmainTableCellpadding=1;//調(diào)整主導(dǎo)航表格Cellpadding

varmainTableBgcolor="#000000";//調(diào)整主導(dǎo)航表格背景色

varmainTableBordercolor="";//調(diào)整主導(dǎo)航表格編框顏色

varmainTableBackgroundImg="";//調(diào)整主導(dǎo)航表格背景圖片url地址

varhrefClassName="link"http://調(diào)整url風(fēng)格樣式

varmainTableTdBgcolor="B2CBCF";//調(diào)整主導(dǎo)航表格Td色

//---------------次導(dǎo)航條Table參數(shù)調(diào)整------------//

varsubTableBorder=0;//調(diào)整次導(dǎo)航條表格邊框?qū)挾?

varsubTableCellspacing=0;//調(diào)整次導(dǎo)航條表格Cellspacing

varsubTableCellpadding=1;//調(diào)整次導(dǎo)航條表格Cellpadding

varsubTableBgcolor="#000000";//調(diào)整次導(dǎo)航條表格背景色

varsubTableBordercolor="";//次導(dǎo)航條表格編框顏色

varsubTableBackgroundImg="";//次導(dǎo)航條表格背景圖片url地址

varsubTableTdBgcolor="B2CBCF";//調(diào)整次導(dǎo)航表格Td色

varsbuTabbleTop=21;//次導(dǎo)航表格上下微調(diào)

varsbuTabbleLeft=-1;//次導(dǎo)航表格左右微調(diào)

//---------------系統(tǒng)參數(shù)*請勿調(diào)整
 
------------//

varlayerMax=mainLayer.length 10;

varlayerName="index";

//---------------生成下拉菜單------------//

functioncreateMainLayer(){

document.write("");

for(i=0;i  

" mainLayer[i] "

");

}

document.write("");

for(j=0;j");

}

//---------------生成每項(xiàng)下拉菜單內(nèi)容------------//

functioncreateSubLayer(num){

varsubLayerName=layerName num;

varsubLayerLeft=(mainTableTdWidth*num) mainTableCellpadding mainTableBorder;

varsubLayerList=eval("subLayer" num);

varsubLayerHttpList=eval("subLayerHttp" num);

document.write("");

if(subLayerList.length!=0){

document.write(" " subLayerList[h] " ");

}

document.write("");

}

document.write("");

}

//------------------------------次菜單顯隱控制--------------------------//

functionlayervib(type,num){

varH=type;

vartemp=(H='visible'?'hidden':'visible')

for(vari=0;i

  

  (4)、如何添加新的主菜單及次級菜單的欄目。

  假設(shè)我們要在已有的欄目里新增加一個“七色鳥”欄目。下面有“論壇”和“文獻(xiàn)”兩個次級欄目。那么我么首先要在代碼的如下部分添加“七色鳥”。

varmainLayer=
 
newArray("藍(lán)色理想","動意營造","七色鳥");//主導(dǎo)航欄目

012

  然后在如下的位置添加“論壇”和“文獻(xiàn)”欄目及連接地址。

varsubLayer0=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目一下的次級欄目

varsubLayerHttp0=newArray("#","#");//主導(dǎo)航欄目一下的次級欄目連接地址

varsubLayer1=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目二的次級欄目

varsubLayerHttp1=newArray("#","#");//主導(dǎo)航欄目二的次級欄目連接地址

varsubLayer2=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目三的次級欄目

varsubLayerHttp2=newArray("#","#");//主導(dǎo)航欄目三的次級欄目連接地址

  注意:藍(lán)色部分是需要新添加的部分。紅色部分是要修改的部分。要和上面的編號一一對應(yīng)。(5)、其他細(xì)節(jié)調(diào)整請參考代碼詳解部分。

  4、附注及擴(kuò)充。

  代碼中主要使用的函數(shù)及方法詳解。

Document.write("tmp")在頁面中寫入tmp.

varsubLayerHttp1=newArray();定義一個新的數(shù)組subLayerHttp1.

For(I=0;I<>

vartemp=(H=值1?值2:值3)當(dāng)H的值等于值1的時候temp等于值2。反之temp的值等于值3。

增強(qiáng)功能。

//---------------系統(tǒng)參數(shù)*請勿調(diào)整------------//

varlayerMax=mainLayer.length 10;

varlayerName="index"

可以設(shè)置layerName=其他字段以生成新的下拉菜單。使頁面內(nèi)共存兩個下拉菜單。

< p="">
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
三分鐘教你學(xué)會網(wǎng)站導(dǎo)航欄設(shè)置
橫向下拉菜單(導(dǎo)航菜單)
高中物理必修三《實(shí)驗(yàn):練習(xí)使用多用電表》PPT課件
欄目導(dǎo)航
wps演示實(shí)現(xiàn)下拉菜單導(dǎo)航效果
楊輝三角形javascript輸出
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服