请Google动画按钮“入住”我网站

技术与开发

重庆 超人 · 2008年6月23日 第24期

谷歌最近在首页推出了具有动画效果的导航按钮，这个功能让小云MM喜欢得不得了。她很想自己的个人网站上也设计一个类似的导航功能，给那些来访问的用户一个惊喜。

细心的朋友可能已经发现了，谷歌的导航按钮的动画效果其实是用一张背景图实现的。

我们首先要准备一张导航按钮背景图，背景图中有每个时刻显示不同效果的元素，当把鼠标移动到导航按钮的时候，不同效果的元素按照预定顺序依次显示。当鼠标离开导航按钮的时候，反顺序显示即可。

第一步 准备背景图

在制作动态导航按钮之前，我们需要先制作一张这样的背景图（见下图），可以按自己的需求制作。然后新建一个网页，在网页的＜body＞＜/body＞之间创建一个div层，该层作为导航按钮的容器（div创建代码下载地址：http://www.shudoo.com/bzsoft）。

第二步 添加导航按钮

容器准备好了，我们可以设计导航按钮了。我们要准备好相关导航按钮的文字链接，然后将这些文字链接生成到对应的按钮图片下面，但是所有的按钮图片都在一幅背景上，怎么把它们分开显示到各个文字链接上呢？

这里我们就要用到对象的backgroundPosition属性，它的作用是设置对象的背景图位置，将背景图的方位值（即对应的TOP和LEFT值）赋值给backgroundPosition属性，便可以轻松地将各个按钮的背景图片正确显示在相应位置。在网页中的＜head＞＜/head＞之间输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：

function tbInit（）{//该函数作用为在容器中生成导航按钮

try{

document.execCommand（"BackgroundImageCache"， false， true）

}

catch （c）{}//防止背景图片在IE下抖动

var bb=1;

var be=6;

var html='';

var l=A.length;//获得导航按钮的个数

var tempi=0;

for（var i=0;i

tempi=i+1;

html+='＜div class="bannMain" ＞＜a href="'+A[i].url+'" ＞＜div id="button'+tempi+'" class="banner" style="background:url（button.png） no-repeat 0px ' + （-37*i） + 'px"＞＜/div＞＜span＞'+A[i].txt+'＜/span＞＜/a＞＜/div＞';//写入导航按钮的相关信息，background属性定义了背景图的显示位置

}

$（'tb'）.innerHTML=html;//将导航按钮生成到容器中

第三步 实现导航按钮动画效果

当导航按钮跟文字链接配上后，我们就可以给导航按钮加上动画效果了。接着第二步代码末尾输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：

if（n＜5）{

var offsetWidth = -width * n;

v.style.backgroundPosition = offsetWidth + 'px ' + bgH + 'px';//通过定位第n幅按钮图片的位置来显示相关图片

}else{

if（n==5）{//当启动导航按钮时缓冲图片动画，达到更好动态效果

v.style.marginTop=playing ？'-3px':'0px';

v.style.marginBottom=playing ？'10px':'7px';

}

if（n==6）{ //当关闭导航按钮时缓冲图片动画，达到更好动态效果

v.style.marginTop=playing ？'0px':'-3px';

v.style.marginBottom=playing ？'7px':'10px';

n = playing ？n + 1 : n - 1;//当playing为真时背景图从1到n幅图依次显示，当playing为假时背景图从n到1幅图依次显示

time=setTimeout（'bn（' + vn + '，' + n + '，' + playing + '）'，100）;//每100毫秒执行一次切换背景图片的程序以达到动态图片显示效果

第四步 用鼠标控制动画效果显示

动画效果有了，我们还需要实现当鼠标移到导航按钮时显示动画效果，离开导航按钮时， 不显示动画效果。在第三步的代码后输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：

if（b.tagName.toUpperCase（）=="A" && tv！=b）{//当鼠标指针在某一按钮之上的时候

var vn;

stopplay（）;//停止播放当前动画

tv=b;

vn=parseInt（b.childNodes[0].id.replace（'button'，''））;//获得当前要播放动画的按钮ID号

bn（vn，1， true，A[vn-1].color）;//开始播放当前按钮动画

编后

这次介绍的动态导航按钮主要利用了切换对象背景来达到动态显示的效果。如果大家把有连续性的图片设计成背景图，再定时切换对象背景，你会发现原来制作动画片就这样简单。