一个很酷的Ajax缓冲滑动效果代码

我之前是在逛一个国外WP设计者的Blog时看到这个效果，该作者是把这个效果放在header部份，用来展示日历，about等。觉得很COOL。后来碰巧看到5key在Google code上找到了这个效果的源码下载。

一个很酷的Ajax缓冲滑动效果代码


本来是想用这个效果新建一个我的Google分享页面上，嵌入Google日历、Picasa相册和Google maps等。 但是奈何BH的主机速度限制，用这个效果载入速度会很慢。所以，只好放弃。

一个很酷的Ajax缓冲滑动效果代码

喜欢的朋友可以下载了研究一下，根据说明，还可以把效果进行增强，弄成自动滚动等。但我对JS代码并不熟悉，也没实验过这些增强型应用。

昨天晚上，又看到yichi在他的博客侧边栏顶部，使用了这个效果，更酷。呵呵。另外，这家伙开始做收费主题了，虽然国人不大可能会愿意花钱去买一个WP主题，不过爱好设计的朋友，也可以去他的博客欣赏一下， 吸取一些灵感。（呃，我没说让你去恶意COPY哦！）

一个很酷的Ajax缓冲滑动效果代码

当然，可能又要有朋友说，过于花哨了，但是设计之美就是用来欣赏的，实用是硬道理，但花哨也是必不可少的。就像你必须吃饭才可以维持生命，但你同时还会买一些漂亮衣服来把自己弄的体面些。

下面是panic对这个效果的运用。这个效果的作者也正是从Panic获得灵感，结合了几个js文件，制作了这一特效。

一个很酷的Ajax缓冲滑动效果代码


最后，分享两点我使用后的小贴士：
一，这其实是把多个DIV滑动层放在一个总的DIV容器里面，通过溢出的限制，达到层的重叠。再用锚标记控制，达到切换效果。如果你不使用JS代码，仅仅是使用CSS，也可以达到切换，只是没有了Ajax缓冲滑动的效果，看上去可能不那么COOL!
二，下载该代码运行后，你看到的是横向的左右缓冲滑动，如果你想弄成上下滑动缓动，只需要找到glider.css里面的
div.scroller div.content { width: 10000px;
}
把width: 10000px;删除，就可以达到上下缓冲滑动。

下载地址　|　演示地址 

标签: , ,

作者: paran

链接: 一个很酷的Ajax缓冲滑动效果代码

本站所有文章，除特别标明外，皆为原创。如需转载，请复制粘贴下面的代码到文章底部.

转载自 <a href="http://parandroid.com/a-cool-ajax-code-buffer-sliding-effect/" title="一个很酷的Ajax缓冲滑动效果代码" rel="bookmark">一个很酷的Ajax缓冲滑动效果代码 | 帕兰映像</a>