Javascript滑门效果高级篇
Posted on 星期二, 一月 30th, 2007 at 12:49 下午. 1,774次浏览在滑门效果的中级篇中，我们将滑门数目扩展到四个，五个，N个。因自身改版博客首页调用次数比较多，所以滑门效果需要出现两次或两次以上。即同样的滑门，使用两次，我把原先的滑门代码重新复制一遍，结果出现了点第二大层的滑门，会影响到第一大层的内容，而本身实现不了滑门效果。为了解决第二次重复使用的错误，网络搜索答案没有结果。在“第五叶”帮助下，我终于学会重复使用滑门效果。现将修改方法如下，仅供参考！
第一步，修改Javascript代码，增加赋值参数，完整代码如下：
<script language=”javascript” type=”text/javascript”>
function MotionChange(id, add)
{
for(var i=1;i<=5;i++)
{
if(i==id)
{
document.getElementById(”MotionChange”+i+add).style.display=”block”;
}
else
document.getElementById(”MotionChange”+i+add).style.display=”none”;
}
}
</script>
第二步，增加原来DIV滑门层，补充赋值参数，参考代码如下：
<div id=”MotionChange1″ style=”display:block”>
<div class=”MenuA2″>
<ul>
<li class=”active” onmouseover=”MotionChange(1, ”)”><a href=”#” mce_href=”#”>追梦阁</a> </li>
<li class=”normal” onmouseover=”MotionChange(2, ”)”><a href=”#” mce_href=”#”>求仕堂</a> </li>
<li class=”normal” onmouseover=”MotionChange(3, ”)”><a href=”#” mce_href=”#”>工作室</a> </li>
<li class=”normal” onmouseover=”MotionChange(4, ”)”><a href=”#” mce_href=”#”>民生馆</a> </li>
<li class=”normal” onmouseover=”MotionChange(5, ”)”><a href=”#>梦幻国</a>
</li></ul>
</div>
<div class=”content1″>
<div class=”pic”>
</div>
</div>
</div>
<div id=”MotionChange2″ style=”display:none”>
<div class=”MenuA2″>
<ul>
<li class=”normal” onmouseover=”MotionChange(1, ”)”><a href=”#” mce_href=”#”>追梦阁</a> </li>
<li class=”active” onmouseover=”MotionChange(2, ”)”><a href=”#” mce_href=”#”>求仕堂</a> </li>
<li class=”normal” onmouseover=”MotionChange(3, ”)”><a href=”#” mce_href=”#”>工作室</a> </li>
<li class=”normal” onmouseover=”MotionChange(4, ”)”><a href=”#” mce_href=”#”>民生馆</a> </li>
<li class=”normal” onmouseover=”MotionChange(5, ”)”><a href=”#” mce_href=”#”>梦幻国</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=”#”>追梦阁</a> </li>
<li class=”normal” onmouseover=”MotionChange(2, ”)”><a href=”#” mce_href=”#”>求仕堂</a> </li>
<li class=”active” onmouseover=”MotionChange(3, ”)”><a href=”#” mce_href=”#”>工作室</a> </li>
<li class=”normal” onmouseover=”MotionChange(4, ”)”><a href=”#” mce_href=”#”>民生馆</a> </li>
<li class=”normal” onmouseover=”MotionChange(5, ”)”><a href=”#” mce_href=”#”>梦幻国</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”>
003
</div>
</div>
</div>
<div id=”MotionChange4″ style=”display:none”>
<div class=”MenuA2″>
<ul>
<li class=”normal” onmouseover=”MotionChange(1, ”)”><a href=”#” mce_href=”#”>追梦阁</a> </li>
<li class=”normal” onmouseover=”MotionChange(2, ”)”><a href=”#” mce_href=”#”>求仕堂</a> </li>
<li class=”normal” onmouseover=”MotionChange(3, ”)”><a href=”#” mce_href=”#”>工作室</a> </li>
<li class=”active” onmouseover=”MotionChange(4, ”)”><a href=”#” mce_href=”#”>民生馆</a> </li>
<li class=”normal” onmouseover=”MotionChange(5, ”)”><a href=”#” mce_href=”#”>梦幻国</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”>
004
</div>
</div>
</div>
<div id=”MotionChange5″ style=”display:none”>
<div class=”MenuA2″>
<ul>
<li class=”normal” onmouseover=”MotionChange(1, ”)”><a href=”#” mce_href=”#”>追梦阁</a> </li>
<li class=”normal” onmouseover=”MotionChange(2, ”)”><a href=”#” mce_href=”#”>求仕堂</a> </li>
<li class=”normal” onmouseover=”MotionChange(3, ”)”><a href=”#” mce_href=”#”>工作室</a> </li>
<li class=”normal” onmouseover=”MotionChange(4, ”)”><a href=”#” mce_href=”#”>民生馆</a> </li>
<li class=”active” onmouseover=”MotionChange(5, ”)”><a href=”#” mce_href=”#”>梦幻国</a> </li>
</ul>
</div>
<div class=”content1″>
<div class=”pic”>
005
</div>
</div>
</div>
这是第一个滑门层的代码，再次使用时，复制上述代码，然后对赋值进行修改。修改的地方主要有两个：在MotionChange1后面增加一个字符即可，如MotionChange1a；其二，在MotionChange(1, ”)将’增加赋值a，即MotionChange(1, ‘a’)。MotionChange2依然类推修改即可。
css层代码不需要进行修改，简简单单两步，解决了我二次重复使用的错误。之所以想到会将滑门代码二次使用，一来减轻学习任务，二来减化网页代码。从滑门效果的初级篇，到中级篇，再到现在的高级篇，我从中不断学习，不断积累，使得我能够对所学的知识能够扩展功能，更能巩固学习成果，继续保持良好的习惯！
