用上Js的页面载入效果已经有很多种了,这里说的是打开本页的一个缓冲特效,渐显的载入效果,适用于比较简单的主题。这个应该是我先用上的吧,算是原创?因为发现有人已经用了,反正也很简单,赶紧拿出来凑凑数。

css部分

#container{opacity: 0;}

#container是包括整个页面的的div。没用body,因为body还用了背景图,这样看着比全黑的舒服点。

先载入jQuery,只需下面一行代码就可以:

$('#container').animate({ opacity: '0.87' }, 2000);

解释:#container同上,opacity: '0.87' :0.87是透明度,如果不是我这种半透明的主题,改成1就好,最后的”2000“是载入时间,这里是2s内透明度改变完成。注意:此效果只针对非IE浏览器。

顺便说下,由于主题部分给透明了,要是不支持js的看不见内容,比如搜索引擎的缓存就只能看见背景,用判断搜索引擎的php函数可以解决这个问题。比如:

<div id="container"<?php if(!is_bot()){ echo ' style="opacity:0;"';}?>>	

哦,对了,demo就刷新一下看看

  1. heson (2010.10.11 at 16:10) 41楼

    用上了 不错不错 哈哈

  2. Yin (2010.10.12 at 22:25) 42楼

    很炫的效果

  3. Google地球 (2010.12.09 at 10:39) 43楼

    不知道弄啊!!winy。地址:90-00.com。你帮我看看,是不是难产!

  4. mofei (2010.12.15 at 09:21) 44楼

    这个渐显在fierfox下很明显,其他浏览器里就看不出来!为什么呢...

    • winy() (2010.12.15 at 11:35)

      @mofei
      chrome也行吧,其它的,IE没有优化过

    • mofei (2010.12.15 at 12:28)

      @winy ,要是能完善就更好了,起码在大多数人用的浏览器能出效果

    • Melody (2011.02.24 at 18:04)

      @winy ,用了之后页面一片空白

  5. 卜卜口の (2011.01.26 at 08:11) 45楼

    很显然GG很早就用过, [imoe.in]XDD :smile:

    另, 头像那里先把邮箱转换成小写再MD5.

  6. sprityaoyao (2011.05.01 at 14:06) 46楼

    多谢博主分享,很简单的方法

  7. sprityaoyao (2011.05.01 at 14:08) 47楼

    对了,你这个透明是JS效果?我用CSS做的,应该不会影响吧

  8. sprityaoyao (2011.05.01 at 16:09) 48楼

    求博主的半透明效果的js代码

    • winy (2011.05.02 at 00:41)

      @sprityaoyao这个?
      $('#container').animate({ opacity: '0.87' }, 2000);

    • sprityaoyao (2011.05.02 at 00:49)

      @winy ,这不是渐现效果吗

    • winy() (2011.05.02 at 03:03)

      @sprityaoyao ,是啊,我只是没用fadeIn,改用opacity: 0.87。这个就是半透明

评论分页: 1 ... 4 5 6 7

发布评论

邮箱(必填)

换个背景