Javascript滑门效果初级篇
Posted on 星期一, 一月 29th, 2007 at 12:51 下午. 1,903次浏览这些天一直忙着修改博客首页，通过改版首页，使界面变得更加简单，可以腾出部分位置来做相关的广告位宣传。在修改过程中，遇到最大的问题就是如何使在页面主体的部分，如何实现两个分类切换的滑门效果。分析研究了网易的源代码，在天之竹的帮助下，我终于实现了最简单的滑门效果。现将调用过程的代码贴出来，达到资源共享。
Javascript<script language=”javascript” type=”text/javascript”>
function MotionChange(id)
{
for(var i=1;i<=3;i++)
{
if(i==id)
{
document.getElementById(”MotionChange”+i).style.display=”block”;
}
else
document.getElementById(”MotionChange”+i).style.display=”none”;
}
}
</script>
css
.Mainbox{ width:760px; margin:5px auto;}
.body01{ width:435px; float:left;height:22px;}
.menuA2 {}
.menuA2 ul{ margin:0; padding:0}
.menuA2 li{ float:left; list-style:none;}
.menuA2 .active{background:url(image/caidanon.gif) no-repeat; width:87px; padding:6px 0 2px;cursor:pointer; text-align:center}
.menuA2 .normal{background:url(image/caidanoff.gif) no-repeat; width:87px; padding:6px 0 2px;cursor:pointer; text-align:center}
.menuA2 .over{background:url(image/caidanon.gif) no-repeat; width:87px; padding:6px 0 2px;cursor:pointer; text-align:center}
.menuA2 li a{text-decoration:none}
.menuA2 li a:hover{text-decoration:underline}
.content1{text-align: left; width:425px; float:left; border:1px solid #ccc; border-top:none;padding:0 5px }
.content1 .pic{float:left; line-height:200%;}
DIV
<div class=”Mainbox”>
<div class=”body01″>
<div id=”MotionChange1″ style=”display:block”>
<div class=”menuA2″>
<ul>
<li class=”active” onmouseover=”MotionChange(1)”><a href=”#” mce_href=”#”>001</a> </li>
<li class=”normal” onmouseover=”MotionChange(2)”><a href=”#” mce_href=”#”>002</a> </li>
<li class=”normal” onmouseover=”MotionChange(3)”><a href=”#” mce_href=”#”>003</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”> 001 </div>
</div>
</div>
<div id=”MotionChange2″ style=”display:none”>
<div class=”menuA2″>
<ul>
<li class=”normal” onmouseover=”MotionChange(1)”><a href=”#” mce_href=”#”>001</a> </li>
<li class=”active” onmouseover=”MotionChange(2)”><a href=”#” mce_href=”#”>002</a> </li>
<li class=”normal” onmouseover=”MotionChange(3)”><a href=”#” mce_href=”#”>003</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”> 002 </div>
</div>
</div>
<div id=”MotionChange3″ style=”display:none”>
<div class=”menuA2″>
<ul>
<li class=”normal” onmouseover=”MotionChange(1)”><a href=”#” mce_href=”#”>001</a> </li>
<li class=”normal” onmouseover=”MotionChange(2)”><a href=”#” mce_href=”#”>002</a> </li>
<li class=”active” onmouseover=”MotionChange(3)”><a href=”#” mce_href=”#”>003</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”> 003 </div>
</div>
</div>
</div>
</div>
说明
01.滑门切换menuA2.active等图片地址url需要自行修改，其他参数没有细化设置，使用者可自行对ul/li/menuA2等class名称按照自我风格自定义。
02.滑门效果限制切换效果在三个或三个以内，如果要两个滑门菜单切换的话，只要将有关于MotionChange3代码行删除，整个层代码删除即可成两滑门。
