导航条——展开式导航条

Posted 2020-07-26 柯南&

1.概述

    对于一个企业网站来说，“联系我们”超链接是必不可少的。为了更加引人注意，可以将其制作成具有展开式动画效果的导航条。运行本实例，读者可以看到页面右侧的“联系我们”导航条是慢慢展开的，并且每次刷新页面时，都会以同样的动画效果展开。

 

2.技术要点

    本例主要通过自定义javascript函数ourmove()控制Image对象的height属性值实现的。为了实现动画效果，在JavaScript函数中还需要应用setTimeout()方法延迟执行改变图片高度的操作。

 

3.具体实现

（1）在网页中要显示“联系我们”导航条的位置插入一张全部展开后的“联系我们”导航图片，在需要设置超链接的文字上添加图片热点并设置相应的超链接。

（2）将图片的height属性值设置为0，name属性设置为our。

（3）编写自定义的JavaScript函数ourmove()，用于实现图片的展开效果。ourmove()函数的代码如下：

<script language="javascript">
function ourmove(){ 
       if(our.height<163){
          our.height=our.height+9;
          setTimeout(ourmove,1);    //每隔一毫秒调用一次ourmove函数
       }
}
</script>

（4）在当前页面的最底部，也就是</body>标记之前，添加如下代码调用ourmove()，实现导航条的展开式动画效果。

<script language="javascript">

     ourmove();

</script>