"百度搜索风向标"-云标签动画设计制作

作者:林炜贤来源:www.163css.com发表时间:(2010-11-12)

上过百度搜索风云榜的朋友肯定知道右侧那个动画,,有很多标题像云一样在飘来飘去,鼠标划过去,标题会停止,如果是图片的话就会放大。像这样的动画,有个名字叫“云标签”。这个名字是QQ上的朋友“为你喝彩”告诉我的,我今天介绍的这个动画也是他发给我的,非常感谢。

在百度的“搜索风云榜”中,我们可以看到这个动画是用flash制作出来的,我今天要告诉大家的是用js制作的“云标签”。不过,运行起来没有百度的那么完美,没办法实现鼠标划过标题停止及图片放大功能。但基本上实现了标题和图片在飘浮,过了一会会停止,当鼠标划过时,标题及图片又像云一样浮动起来,真是有意思。

据说jquery也实现了这个功能,但我通过百度搜索到的功能并没有这个这么完美。

以下是我制作的效果截图:

看起来还是挺好玩的,百度有这个动画来提示将可能出现的热门搜索,真是有远见。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/201011/ybqdh/index.html

下载地址:百度搜索风向标-云标签动画设计制作.rar

返回作者主页:www.163css.com阅读 (13150)
更多 1