一個(gè)簡易的CSS/JS滑動(dòng)門_菜單導(dǎo)航特效

寫這個(gè)滑動(dòng)門純屬是為了練手，剛接觸WEB前端沒多長時(shí)間，也算是對自己的一個(gè)總結(jié)吧，看了很多的滑動(dòng)門和滑動(dòng)菜單的資料，總算寫出來了一個(gè)像樣的，雖然外觀不怎么樣，但可以兼容火狐，還請老前輩們不要笑話，以后有好多西再請大家批評。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>學(xué)習(xí)練手寫下個(gè)簡易的滑動(dòng)門</title>
<style>
*{
margin:0px; 
padding:0px;
font-size:9pt;
}
#tab{width:400px;
height:auto;
margin:0 auto;	 
}
  ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(15.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里調(diào)節(jié)各個(gè)li之間的距離,position是保證下邊框的出現(xiàn)*/
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(http://p1.mb5u.com/texiao/1//tr.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要設(shè)border*/

}
</style>
</head>
<script  language="javascript">
function g(o){return document.getElementById(o);}
function showdiv(i){
for(j=1;j<=3;j++){
g("div"+j).className="undise"//將三個(gè)都設(shè)為undise，以便將來可以設(shè)置顯示的那個(gè)；
g("li"+j).className=""//消除原來所有l(wèi)i的屬性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
function showdiv1(i){
for(j=4;j<=6;j++){
g("div"+j).className="undise"//將三個(gè)都設(shè)為undise，以便將來可以設(shè)置顯示的那個(gè)；
g("li"+j).className=""//消除原來所有l(wèi)i的屬性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
</script>
<body>
	<div div id="tab">
		<ul>
		<li id="li1" class="fff"><span onmouseover="showdiv(1)">世界的中國</span></li>
		<li id="li2"><span onmouseover="showdiv(2)">網(wǎng)頁特效</span></li>
		<li id="li3"><span href="#" onmouseover="showdiv(3)">源代碼</span></li>
		</ul>
	
	<div id="all">
		<div id="div1" class="dise">學(xué)習(xí)型源碼下載站。</div>
		<div id="div2" class="undise">精選網(wǎng)頁特效，應(yīng)有盡有~</div>
		<div id="div3" class="undise">高質(zhì)量源代碼資源隨您下載！</div> 
	</div>
    </div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索一個(gè)簡易的CSS/JS滑動(dòng)門
特效說明：
菜單導(dǎo)航模板-一個(gè)簡易的CSS/JS滑動(dòng)門。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

一個(gè)簡易的CSS/JS滑動(dòng)門_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些