當前位置:菜譜大全網 - 菜譜 - 求個簡單javascript代碼 謝謝,網站菜單功能

求個簡單javascript代碼 謝謝,網站菜單功能

不用說自己菜不菜的,能有這個學習的精神已經很值得鼓勵了

呵呵,下面,我來給妳介紹幾個網站常見的菜單

第壹個:仿網易的滑動門導航菜單

<html xmlns="" />

<meta )---仿拍拍paipai.com首頁產品圖片隨機輪顯切換效果</title><style>

body {font-size:12px}

img {border:0px}

#sale{right:206px;top:0;width:260px;background:#fff}

#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitle.gif") no-repeat}

#saleList{margin-top:5px}

#saleList .saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}

#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}

#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y;}

#saleList a img{margin:5px 0}

#saleList a:hover{background-color:#EBFFC5}

</style>

<script type="text/javascript">

rnd.today=new Date();

rnd.seed=rnd.today.getTime();

function rnd(){

rnd.seed = (rnd.seed*9301+49297) % 233280;

return rnd.seed/(233280.0);

}

function rand(number){

return Math.ceil(rnd()*number)-1;

}

function nextSale(order){

if(order=="up") saleNum--;

else saleNum++;

if(saleNum>2) saleNum=0

else if(saleNum<0) saleNum=2;

//alert(saleNum);

for(i=0;i<3;i++)

document.getElementById("saleList"+i).style.display="none";

document.getElementById("saleList"+saleNum).style.display="";

}

</script>

</head>

<body>

<div id="sale" class="absolute overflow">

<div id="saleTitle" class="absolute">

<a href="javascript:nextSale('up')" title="點擊到上壹屏">

<img src="images/saleFore.gif" hspace="4" onmouseover="this.src='images/saleForeOver.gif'" onmouseout="this.src='images/saleFore.gif'" /></a><a href="javascript:nextSale('down')" title="點擊到下壹屏"><img src="images/saleNext.gif" onmouseover="this.src='images/saleNextOver.gif'" onmouseout="this.src='images/saleNext.gif'" /></a></div>

<div class="overflow" style="height:330px" id="saleList">

<script type="text/javascript">var saleNum=rand(3);</script>

<div id="saleList0" style="display:none">

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="聖誕浪漫飾品超級大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804.jpg" width="65" height="65" /></div>

<div>

聖誕浪漫飾品<br />

超級大促</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>

<div>

攝像頭集結號<br />

給妳新的感覺</div>

</a><a href="" target="_blank">

<div>

<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>

<div>

好感度提升<br />

韓版娃娃裝</div>

</a></div>

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="復古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293.jpg" width="65" height="65" /></div>

<div>

復古牛仔外套<br />

特惠119元起</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="聖誕拍拍特供運動服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65" /></div>

<div>

聖誕拍拍特供<br />

運動服3折</div>

</a><a href="" target="_blank">

<div>

<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>

<div>

攝像頭集結號<br />

給妳新的感覺</div>

</a></div>

<div>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="聖誕拍拍特供電腦周邊4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530.jpg" width="65" height="65" /></div>

<div>

聖誕拍拍特供<br />

電腦周邊4折</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="party扮靚甜美腮紅" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65" /></div>

<div>

party扮靚<br />

甜美腮紅</div>

</a><a href="" target="_blank">

<div>

<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>

<div>

好感度提升<br />

韓版娃娃裝</div>

</a></div>

</div>

<div id="saleList1" style="display:none">

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="新奇好玩便宜盡在網遊頻道" src="/jsimages/UploadFiles_3321/200804/20080423085516612.jpg" width="65" height="65" /></div>

<div>

新奇好玩便宜<br />

盡在網遊頻道</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="展現高貴氣質騎士系馬靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" /></div>

<div>

展現高貴氣質<br />

騎士系馬靴</div>

</a><a href="" target="_blank">

<div>

<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>

<div>

攝像頭集結號<br />

給妳新的感覺</div>

</a></div>

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="永不過時條紋毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984.jpg" width="65" height="65" /></div>

<div>

永不過時<br />

條紋毛衣</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="聖誕拍拍特供運動鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65" /></div>

<div>

聖誕拍拍特供<br />

運動鞋2折</div>

</a><a href="" target="_blank">

<div>

<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>

<div>

好感度提升<br />

韓版娃娃裝</div>

</a></div>

<div>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="精簡唯美索愛K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302.jpg" width="65" height="65" /></div>

<div>

精簡唯美<br />

索愛K630</div>

</a>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="原裝瑞士軍刀精選" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65" /></div>

<div>

原裝瑞士軍刀<br />

精選</div>

</a><a href="" target="_blank">

<div>

<img alt="超薄機身索愛W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>

<div>

超薄機身<br />

索愛W880</div>

</a></div>

</div>

<div id="saleList2" style="display:none">

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="各就各味秋冬飲食計劃" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpg&type=3" width="65" height="65" /></div>

<div>

各就各味<br />

秋冬飲食計劃</div>

</a><a href="" target="_blank">

<div>

<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>

<div>

好感度提升<br />

韓版娃娃裝</div>

</a></div>

<div class="saleTwo">

<a class="saleItem" href="" target="_blank">

<div>

<img alt="聖誕拍拍特供隨身視聽5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65" /></div>

<div>

聖誕拍拍特供<br />

隨身視聽5折</div>

</a><a href="" target="_blank">

<div>

<img alt="超薄機身索愛W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>

<div>

超薄機身<br />

索愛W880</div>

</a></div>

<div>

<a class="saleItem" href="" target="_blank">

<div>

<img alt="我愛我家家居大搶購" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" /></div>

<div>

我愛我家<br />

家居大搶購</div>

</a><a href="" target="_blank">

<div>

<img alt="超值彩妝套裝變身派對女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919.jpg" width="65" width="65" height="65" /></div>

<div>

超值彩妝套裝<br />

變身派對女王</div>

</a></div>

</div>

</div>

</div>

<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>

<p> </p>

<p>更多網頁特效代碼盡在 <a href="/">網頁特效代碼</a></p>

</body>

</html>

這個仿拍拍基本上就是2層放圖片,但用起來的效果還是可以的,如果不喜歡我還有下面呢,慢慢學,總會看懂的 (最重要的還是Css哦)

這個主要就是讓層實現隱藏 我覺得這個在層使用方面還是好的

從總體上看,在實現層與層之間的交互,在其代碼 我覺得妳有必要去認真看下 !

以上是我介紹額度菜單,雖然不是很強大,但是卻很使用,而且在J2EE中

菜單基本上是壹個假象,都是用層與Css之間的特效做出來的!

學會了層的具體應用,我相信妳也可以有自己特色的菜單的

那我祝妳好運咯!!加油!!