热门专栏: WordPress 专栏

我之前是在逛一个国外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;删除,就可以达到上下缓冲滑动。

下载地址 | 演示地址 

留言列表

Comments List
  1. 2007年11月5日 geuro 说:

    太酷了。这个效果我前几天也看到过,太棒了。

  2. 2007年11月5日 腻歪 说:

    果然好酷!谢谢老帕啊~~

  3. 2007年11月5日 akuii 说:

    真的是.com..错了一次后来就都自动填写的…

    汗….丢大了…

  4. 2007年11月5日 sofish 说:

    等我那天去搞个有用的东西来…没想到看了yichi之后,这么快就找出来了…

  5. 2007年11月5日 老帕 说:

    不是看到他才找到的。很早以前就看到这个效果了。

  6. 2007年11月5日 sofish 说:

    说你找出来嘛…OK…

  7. 2007年11月5日 大猫 说:

    - -咦,好玩~

  8. 2007年11月5日 老帕 说:

    哈哈….OK…OK…

  9. 2007年11月5日 冬日暖阳 说:

    这款WP皮肤很像门户,呵呵

  10. 2007年11月5日 niuhuifei 说:

    这个效果确实很吸引人,我也瞄上好久了,比如warpspire.com顶部的30 second tour效果,但我不知道js是不是the same。

  11. 2007年11月5日 老帕 说:

    哎。老牛,太感谢你了。我文中说的就是warpspire,我最先就是在他那里看到的,我把他收藏在书签里的。但后来我的FF出问题,书签全不见了。我找了好几天都找不到他的BLOG,域名也没记住。
    他用的应该不是这个代码,我看了一下,他那个比我介绍这个要简单,体积也要小的多。

  12. 2007年11月5日 mercy 说:

    大学的时候参加网页设计大赛,有个家伙就是用这个效果夺冠了,中文系的。

  13. 2007年11月6日 sofish 说:

    我弄了一个东西,已经基本成型了…哈哈…等我弄完就介绍出来…

  14. 2007年11月6日 kaku 说:

    你右边的广告没有猜错的话,关键字是sex。我的sex现在显示的都是电子产品。

    blog还是简介了好。就像我刚刚架了另一个英文站[url]http://www.kakug.com/weblog[/url]一样。还有,我对三栏的模板,加模块不太懂怎么回事。

  15. 2007年11月6日 正月初一 说:

    哇,这个帅啊,仔细看下要

  16. 2007年11月7日 shaoqing 说:

    看了http://www.schematic.com/#/Home/
    真漂亮。不过会不会很影响打开速度啊。

  17. 2007年11月8日 vampire 说:

    用mootools,scriptaculous很容易实现

  18. 2007年11月9日 现实呓种 说:

    很久很久以前,做个人主页的时候,在台湾一个很牛逼的个人网站就看过这个效果,我的第二个个人网站还用过这个效果……(假如是一样的话)

  19. 2007年12月16日 dy 说:

    这个有缺陷,到最后一个div时再点next就退回去了,而不是循环的滚动.苹果网站那个是循环的…

添加回复

Respond This Post

Entries (RSS) and Comments (RSS)
Powered by Wordpress Designed by 5android Vaild W3C CSS & XHTML