如题
大家好~我想请大家帮个忙，我这有一段完整的滑动门效果（嘿嘿，是我在网上下的）我在我自己做的网页上使用单个的时效果好用，但是呢，我再多添加一个以后就不好用了，希望大家能帮我修改一下(我是半个小白，哎,大家见谅~）最好能告诉我，修改哪个部位，最好能把修改后的代码也告诉我，我也看过前辈们发表的关于如何修改滑动门效果的帖子，可惜哎 没大看明白~！！
<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="在远方┊jscode.cn" />
<meta name="Copyright" content="copyright (c) 2008 www.jscode.cn" />
<title>仿网页特效观止首页栏目切换滑动门效果 - 网页特效观止-网页特效代码|JsCode.CN|</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(images/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
font-weight:bold;color:#ffffff;background:url(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(images/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
background:url(images/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
background:url(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.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li>
<li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li>
<li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li>
<li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p>说明：如果需要点击切换的话，将onmouseover改成onclick即可，当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径</p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>
</body>
</html>
|
顶部 
加入收藏夹
2009-07-10 10:35:08 
已设置保密
回复
引用
报告
编辑
删除
