帶箭頭指向的首頁(yè)滑動(dòng)門特效代碼_菜單導(dǎo)航特效

帶箭頭指向的首頁(yè)滑動(dòng)門殊效代碼，而且可以很方便的在滑動(dòng)和鼠標(biāo)點(diǎn)擊之間切換，代碼比以前的很多滑動(dòng)門都簡(jiǎn)潔，而且效果相當(dāng)舒服，寬度和高度根據(jù)你網(wǎng)頁(yè)的大小可以自己修改，要留意CSS文件內(nèi)的圖片路徑要一并修改。

<!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>首頁(yè)欄目切換滑動(dòng)門代碼</title>
<style type="text/css">
body {
    font-size:9pt
}
#slidingBlock {
    width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden
}
#slidingBlock h4 {
    float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden
}
#slidingBlock h4.menuNo {
    font-weight:normal;color:#333333;background:url(http://p1.mb5u.com/texiao/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
    font-weight:bold;color:#ffffff;background:url(http://p1.mb5u.com/texiao/slidingMenu.gif) no-repeat
}
#slidingBlock DIV.slidingList_none {
    display:none
}
#slidingBlock DIV.slidingList {
    margin:0px;padding:5px;height:150px
}
#slidingBlock DIV.slidingList ul {
    margin:0px;padding:0px
}
#slidingBlock DIV.slidingList li {
    height:20px;line-height:20px
}
#slidingBlock DIV.slidingList li span {
    font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px
}
#slidingBlock DIV.slidingList li.one {
    background:url(http://p1.mb5u.com/texiao/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
    background:url(http://p1.mb5u.com/texiao/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
    background:url(http://p1.mb5u.com/texiao/slidingTag3.gif) no-repeat
}
</style>
</head>

<body>
<div id="slidingBlock">
<script language="javascript">
  function switchmodTag(modtag,modmrc,modk) {
    for(i=1; i <4; i++) {
      if (i==modk) {
        document.getElementById(modtag+i).className="menuOn";document.getElementById(modmrc+i).className="slidingList";}
      else {
        document.getElementById(modtag+i).className="menuNo";document.getElementById(modmrc+i).className="slidingList_none";}
    }
  }
</script>
	<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
	最近更新</h4>
	<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
	近期推薦</h4>
	<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
	熱門點(diǎn)擊</h4>
	<div class="slidingList" id="slidingList1">
		<ul>
			<li class="one"><span>1</span><a href="/jscss/code/34.shtml" target="_blank">暖色調(diào)的下拉菜單可支持二級(jí)</a></li>
			<li class="one"><span>2</span><a href="/jscss/code/24.shtml" target="_blank">帶倒影的圖片切換（類似FLASH）</a></li>
			<li class="one"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">純CSS實(shí)現(xiàn)漂亮的分頁(yè)按鈕風(fēng)格</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList2">
		<ul>
			<li class="two"><span>1</span><a href="/">第二個(gè)的信息第二個(gè)的信息</a></li>
			<li class="two"><span>2</span><a href="/jscss/code/34.shtml" target="_blank">暖色調(diào)的下拉菜單可支持二級(jí)</a></li>
			<li class="two"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">純CSS實(shí)現(xiàn)漂亮的分頁(yè)按鈕風(fēng)格</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList3">
		<ul>
			<li class="thr"><span>1</span><a href="/">第三個(gè)的信息第三個(gè)的信息</a></li>
			<li class="thr"><span>2</span><a href="/jscss/code/24.shtml" target="_blank">帶倒影的圖片切換效果（類似FLASH）</a></li>
			<li class="thr"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">純CSS實(shí)現(xiàn)漂亮的分頁(yè)按鈕風(fēng)格</a></li>
		</ul>
	</div>
</div>
<p>如果想要點(diǎn)擊鼠標(biāo)才切換的話，將onmouseover改成onclick即可，寬高就自己調(diào)整吧，另外改變相關(guān)圖片的路徑的話注意修改css樣式代碼的圖片路徑</p>
</body>
</html>

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

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

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

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

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

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索帶箭頭指向的首頁(yè)滑動(dòng)門特效代碼
特效說明：
菜單導(dǎo)航模板-帶箭頭指向的首頁(yè)滑動(dòng)門特效代碼。

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

帶箭頭指向的首頁(yè)滑動(dòng)門特效代碼_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些