用上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就刷新一下看看
用上了 不错不错 哈哈
@heson
情侣博客不错哎
很炫的效果
@Yin ,还好。嘿嘿
不知道弄啊!!winy。地址:90-00.com。你帮我看看,是不是难产!
这个渐显在fierfox下很明显,其他浏览器里就看不出来!为什么呢...
@mofei
chrome也行吧,其它的,IE没有优化过
@winy ,要是能完善就更好了,起码在大多数人用的浏览器能出效果
@winy ,用了之后页面一片空白
很显然GG很早就用过, [imoe.in]XDD
另, 头像那里先把邮箱转换成小写再MD5.
@卜卜口の
还真没考虑到大写的问题,感谢提醒
多谢博主分享,很简单的方法
对了,你这个透明是JS效果?我用CSS做的,应该不会影响吧
求博主的半透明效果的js代码
@sprityaoyao这个?
$('#container').animate({ opacity: '0.87' }, 2000);
@winy ,这不是渐现效果吗
@sprityaoyao ,是啊,我只是没用fadeIn,改用opacity: 0.87。这个就是半透明