非常流畅的绿色滑动门_网页代码站(www.webdm.cn)

您的当前位置：网页代码站 >> 菜单导航 >> 非常流畅的绿色滑动门

非常流畅的绿色滑动门

分类：菜单导航时间：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.webdm.cn/images/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
    font-weight:bold;color:#ffffff;background:url(http://www.webdm.cn/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.webdm.cn/images/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
    background:url(http://www.webdm.cn/images/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
    background:url(http://www.webdm.cn/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.webdm.cn">第一个的信息第一个的信息</a></li>
			<li class="one"><span>2</span><a href="http://www.webdm.cn">第一个的信息第一个的信息</a></li>
			<li class="one"><span>3</span><a href="http://www.webdm.cn">第一个的信息第一个的信息信息信息</a></li>
			<li class="one"><span>4</span><a href="http://www.webdm.cn">第一个的信息第一个的信息</a></li>
			<li class="one"><span>5</span><a href="http://www.webdm.cn">第一个的信息第一个的信息</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList2">
		<ul>
			<li class="two"><span>1</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
			<li class="two"><span>2</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
			<li class="two"><span>3</span><a href="http://www.webdm.cn">第二个的信息第二个的信息信息信息</a></li>
			<li class="two"><span>4</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
			<li class="two"><span>5</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
			<li class="two"><span>6</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
			<li class="two"><span>7</span><a href="http://www.webdm.cn">第二个的信息第二个的信息</a></li>
		</ul>
	</div>
	<div class="slidingList_none" id="slidingList3">
		<ul>
			<li class="thr"><span>1</span><a href="http://www.webdm.cn">第三个的信息第三个的信息</a></li>
			<li class="thr"><span>2</span><a href="http://www.webdm.cn">第三个的信息第三个的信息</a></li>
			<li class="thr"><span>3</span><a href="http://www.webdm.cn">第三个的信息第三个的信息信息信息</a></li>
			<li class="thr"><span>4</span><a href="http://www.webdm.cn">第三个的信息第三个的信息</a></li>
			<li class="thr"><span>5</span><a href="http://www.webdm.cn">第三个的信息第三个的信息</a></li>
		</ul>
	</div>
</div>
</body>
</html>
<a href="http://www.webdm.cn">网页代码站</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效果的精美浮动层