您现在的位置:首页 >> 前端 >> 内容

两种方法使wordpress模板实现淡入淡出

时间:2011/7/5 12:05:39 点击:

  核心提示:一个是从知更鸟上看到的加载jQuery库,将下面代码添加到/head标签前1 script type='text/ 2 //页面淡入淡出 3 $(document).ready(function() ...

一个是从知更鸟上看到的

加载jQuery库,将下面代码添加到</head>标签前

1 <script type="text/javascript"> 

2 //页面淡入淡出 

3 $(document).ready(function() { 

4 $(´body´).hide().fadeIn(1000); 

5 }); 

6 </script>

淡入淡出代码:

01 <script type="text/javascript"> 

02 //页面淡入淡出 

03 $(document).ready(function(){ 

04 $("body").css("display","none"); 

05 $("body").fadeIn("slow"); 

06 $("a[target],a[href*=´javascript´],a.lightbox-processed,a[href*=´#´]").addClass("speciallinks"); 

07 $("a:not(.speciallinks)").click(function(){ 

08 $("body").fadeOut("slow"); 

09 $("object,embed").css("visibility","hidden"); 

10 }); 

11 }); 

12 </script>

可惜这个特效在IE核心浏览器下效果欠佳,那就加个判断只让非IE核心浏览显示淡入淡出特效,在上面代码中加上:

1 if(!+[1,]);else

例如

01 <script type="text/javascript"> 

02 //页面淡入淡出 

03 $(document).ready(function(){ 

04 $("body").css("display","none"); 

05 $("body").fadeIn("slow"); 

06 $("a[target],a[href*=´javascript´],a.lightbox-processed,a[href*=´#´]").addClass("speciallinks"); 

07 $("a:not(.speciallinks)").click(function(){ 

08 $("body").fadeOut("slow"); 

09 $("object,embed").css("visibility","hidden"); 

10 }); 

11 }); 

12 </script>

另外,选择body整个面可能对浏览器造成负担,可替换成某个标签选择器,只让部分DIV显示淡入淡出效果,比如上面的改为#wrapper。

以上是知更鸟的方法,有些模板不支持jQuery特效所以我找了个简单的
<head></head>中加下如下代码

1 <meta http-equiv="Page-Exit"; content="blendTrans(Duration=1.0)">

作者:网络 来源:不详