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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 18:44 点击:

一个是从知更鸟上看到的

加载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)">

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • WordPress添加百度喜欢按钮小技巧
    • Wordpress 博客如何实现自定义Gravatar头像
    • 网站设计分析:建立良好的视觉层级
    • 网站设计分析:“中国式设计”的三个方向
    • 案例分析:奥巴马筹款网站的制作过程
    • 7大主流B2C首页导航栏设计对比分析
    • 创建不平衡的平衡:在网页设计中使用不对称设计
    • Wordpress页面模板制作方法及使用
    • css控制文字前的小图标
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1