非常流暢的綠色滑動門_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 菜單導航 >> 非常流暢的綠色滑動門

非常流暢的綠色滑動門

分類：菜單導航時間：2009-09-09 點擊：

關鍵詞：滑動門|

<!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>
<title>非常流暢綠色滑動門</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body {
    font-size:12px
}
/* 當前模塊的總寬度為250px，不合適的自己調整吧，另外改變相關圖片的路徑的話注意修改css樣式代碼的圖片路徑 */
#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://www.hbsxmp.com/images/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
    font-weight:bold;color:#ffffff;background:url(http://www.hbsxmp.com/images/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://www.hbsxmp.com/images/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
    background:url(http://www.hbsxmp.com/images/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
    background:url(http://www.hbsxmp.com/images/slidingTag3.gif) no-repeat
}
</style>
</head>

<body>

<div id="slidingBlock">
	<script language="javascript">
  function switchmodTag(modtag,modcontent,modk) {
    for(i=1; i <4; i++) {
      if (i==modk) {
        document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
      else {
        document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+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();">
	熱門點擊</h4>
	<div class="slidingList" id="slidingList1">
		<ul>
			<li class="one"><span>1</span><a href="http://www.hbsxmp.com">第一個的信息第一個的信息</a></li>
			<li class="one"><span>2</span><a href="http://www.hbsxmp.com">第一個的信息第一個的信息</a></li>
			<li class="one"><span>3</span><a href="http://www.hbsxmp.com">第一個的信息第一個的信息信息信息</a></li>
			<li class="one"><span>4</span><a href="http://www.hbsxmp.com">第一個的信息第一個的信息</a></li>
			<li class="one"><span>5</span><a href="http://www.hbsxmp.com">第一個的信息第一個的信息</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList2">
		<ul>
			<li class="two"><span>1</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
			<li class="two"><span>2</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
			<li class="two"><span>3</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息信息信息</a></li>
			<li class="two"><span>4</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
			<li class="two"><span>5</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
			<li class="two"><span>6</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
			<li class="two"><span>7</span><a href="http://www.hbsxmp.com">第二個的信息第二個的信息</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList3">
		<ul>
			<li class="thr"><span>1</span><a href="http://www.hbsxmp.com">第三個的信息第三個的信息</a></li>
			<li class="thr"><span>2</span><a href="http://www.hbsxmp.com">第三個的信息第三個的信息</a></li>
			<li class="thr"><span>3</span><a href="http://www.hbsxmp.com">第三個的信息第三個的信息信息信息</a></li>
			<li class="thr"><span>4</span><a href="http://www.hbsxmp.com">第三個的信息第三個的信息</a></li>
			<li class="thr"><span>5</span><a href="http://www.hbsxmp.com">第三個的信息第三個的信息</a></li>
		</ul>
	</div>
</div>
</body>
</html>
<a href="http://www.hbsxmp.com">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼！

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

非常流暢的滑動門！值得下載

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：慢慢變大的窗口
下一篇：【薦】基于jQuery實現防FLASH效果的精美浮動層

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕