仅使用 JavaScript 的 Silverlight 主页优秀导航栏

• 下载源代码 - 131.62 KB

引言

通过本文，您将看到如何仅使用 script.aculos.us & JavaScript，轻松为您的网站构建一个类似于 Silverlight 首页 的精美导航栏。

请原谅我糟糕的图形颜色和不好的悬停效果。

我不是一个有才华的平面设计师.

背景

本文假设您是一名专业的 Web 开发人员，熟悉 JavaScript，并且了解 script.aculo.us JavaScript 库及其用法。

Using the Code

要查看效果，请下载压缩的文章文件并运行 HTML 页面。

现在，让我们来谈谈如何实现如此出色的动画效果。

当我第一次看到 Silverlight 时，我非常兴奋。我想学习它，以便能够做出这样漂亮的东西。但一如既往，我们作为开发人员，总是被现实的墙壁困住，无法迅速将新技术应用到我们的项目中。对我而言，我们的网站主机只支持 .NET 1.1，那么问题来了，“我能否用我现有的工具做类似的事情？”

我从头开始尝试，非常接近成功，但没有得到完美的结果。在搜索网络时，我偶然发现了 script.aculo.us 这个天才的 JavaScript 库，它是一个免费使用的、非常棒的 JavaScript 库，提供开箱即用的效果和拖放功能，您可以安全地在代码中使用它，而不必担心在所有浏览器上都不支持。

使用这个库可以精简您的 JavaScript 代码，让您的 JavaScript 开发过程更加有趣。相信我！！:)

顺便说一下，我还在上传的源代码中包含了条形的 PSD 文件，这样您就可以尝试自己的图形设计了。

首先，我们需要一个普通的导航栏，并在 HTML 页面中准备好它的鼠标悬停效果。我们将跳过这部分内容的讲解。

在我们的 HTML 代码中，我们需要在 HTML 的 `` 部分引用 script.aculo.us 库，需要这两行代码，以及 CSS 文件。

<script src="jsLib/prototype.js" type="text/javascript"></script>
<script src="jsLib/scriptaculous.js?load=effects" type="text/javascript"></script>
<link href="bar.css" rel="stylesheet" />

有关引用库的更多信息，您需要查阅相关文档。

现在，在您的 HTML 页面的 `` 部分声明 `script` 标签，并在其中编写以下 JavaScript 代码。

var t;
var pos=0;
// hold the description text for every link
    var Mtext= new Array();
          Mtext[0]='Silver Light is a a great Tech.';
    Mtext[1]='Genius javascript platform.';
    Mtext[2]='Genius Programmers & Planners.';
 
// holds the arrow desired left position for every link   
   var arrowPositions=new Array();
    arrowPositions[0]='0';
    arrowPositions[1]='130';
    arrowPositions[2]='260'; 

• `t:` 将用作我们动画间隔的引用。
• `pos`: 将保存指示当前箭头位置的变量。
• `Mtext:` 数组包含与每个链接相关的文本。
• `arrowPositions:` 数组包含箭头 `div` 精确的左侧值，以便指向我们链接的中间。数组编号因链接 `div` 的宽度而异，但相对于容器是固定的！！

现在，我们来设定并思考我们想要做什么。我们需要每隔 x 秒调用一个函数来执行动画，这意味着我们需要使用 JavaScript 的 `setInterval` 函数，它允许我们编写另一个函数。所以，代码如下：

function doAutoAnimate(){    
    t = setInterval('autoAnimate()',3000);
}

这个函数仅用于通过调用另一个函数来启动动画（*这是 `setInterval` JavaScript 函数使用的技术*）。现在，另一个函数迫切需要被编写，它负责停止动画。

function stopAutoAnimate(){
     clearInterval(t);     
  } 

现在是 `autoAnimation` 函数：

function autoAnimate()
  {    
      var pos = parseInt(document.getElementById('_currentActive').value)
      document.getElementById('img'+pos).src=document.getElementById
		('img'+pos).src.replace("_","");
       if(pos<2)
       {
          pos +=1;
       }
       else pos=0;
     
     animateManual(pos,arrowPositions[pos]);
     document.getElementById('_currentActive').value = pos;
  }  

对于 `autoAnimate`，我只是将箭头沿导航栏向前推进一步（*这是隐藏字段 `_currentActive` 和 `pos` 变量的作用*），通过调用动画函数并传入目标索引（新位置），这样我就可以从这两个数组中获取该新位置的描述文本和箭头位置。

请注意，我需要更改当前活动的链接图像，以移除悬停效果，这由上面的第二行代码完成。

现在来看看我所说的 JavaScript 库有多棒。看看下面的核心代码：

// do a single animation      
   function animateManual(target,off){
           
   var title = document.getElementById('fdet');                
    new Effect.Parallel([
    new Effect.Move('fdet', 
	{x:0,mode:'absolute',transition: Effect.Transitions.full}), 
    new Effect.Appear('fdet',{duration:0.1, from:0, to:0.9}),       
    new Effect.Move('fdet', {x:30,mode:'absolute',
		transition: Effect.Transitions.reverse}),
    new Effect.Move('imgArrow', {x:off,y:0,mode:'absolute',
		transition: Effect.Transitions.linear})],
    {duration:0.4,beforeStart:function(){document.getElementById
		('descText').innerText=Mtext[target]; 
    document.getElementById('desImg').src = 'images/imgEmpty.png';},
    afterFinish:function(){document.getElementById('desImg').src = 
		'images/img'+target+'.png';}});    
    
    
    switch(target){
     case 0:
        document.getElementById('img0').src='images/sil_.jpg';
     break;
     
     case 1:
        document.getElementById('img1').src='images/scri_.jpg';
     break;
     
     case 2:
         document.getElementById('img2').src='images/mic_.jpg';
     break;
    }  
       
  document.getElementById('_currentActive').value = target;         
   }

就是这样！！所有的魔力都发生在这里。

这个函数接受两个参数：

• `target`: 是一个索引，用于指定应该显示文本和旁边的动画描述图像。
• `off`: 是箭头需要移动到的左侧值。

`Effect.Parallel`：您可以将其视为 Silverlight 中的一个场景或仪表板，但用 JavaScript 从零开始编写。

这个效果接受一个效果数组，并且可以接受选项，就像您在代码中看到的那样。要了解更多信息，您可以查阅该库。我将继续讲解代码。

并行效果同时运行许多效果。

首先，我需要将描述动画区域向下移动到链接的右侧，同时，我需要隐藏它，这样用户就能看到新的文本，并且空白图像从右侧向左侧出现。

因此，我使用 `effect.move` 将 `div` 移动到起点，其中 `left=0`。。！！是的，这是起点而不是终点，因为在那里我将使用一个效果，该效果由 JavaScript 库中内置的数学函数控制。要查看 `Effect.Move` 的所有可选运动（过渡），请参阅 反向过渡。

然后使用 `appear` 效果使其看起来像电影预告片。然后将箭头 `div` 移动到所需位置。请注意，`parallel` 会为您同时完成所有这些工作。真的很酷，不是吗？

最棒的事情之一是，我可以在效果之前或之后执行 JavaScript 代码。

通过这一点，我将能够在正确的时间将向下移动的空白图像更改为目标链接的描述性图像。

最后，我们问自己，到底要把函数调用放在哪里？答案是，在 `li` 元素的 `mouseover` 事件上，我调用 `animateManual` 函数。对于包含 `ul` 的 `div`，我在 `mouseover` 和 `mouseout` 事件上分别调用 `doAutoAnimate()` 和 `stopAutoAnimate()` 函数。因此，当用户将鼠标放在 `ul` 上时，自动动画将停止，并且会调用 `animateManual`，因为用户肯定会悬停在某个 `li` 元素上。

在 `onmouseout` 事件上，我想做与 Silverlight 的精美动画完全相同的事情，即重新运行自动动画。

最后要说的是，我希望页面加载时动画从起始点开始。因此，在图像加载函数中，我直接调用了手动动画以立即移动到动画的起始点，并调用了自动动画函数，以便在 x 秒后开始自动动画，这样它就会不停地自动运行，除非用户将鼠标放在导航栏上。

最后，我想感谢 Microsoft 的天才们付出的巨大努力，并向创造我所使用的 JavaScript 库的杰出 JavaScript 程序员致敬。

对于那些像我一样，看到精美的 Silverlight 导航栏时心生向往，但又没有 Silverlight 支持的用户，我希望我能将您哭泣的原因变成其他东西…… :) 感谢大家花时间阅读。

注意：我没有关注如何使 JavaScript 代码更整洁或图形设计。我只是在追求一个非常非常精美的动画导航栏。

历史

• 再次上传源代码，以解决报告的缺少源文件错误。