jQuery实现页面淡入淡出

2011年03月14日23:01:26 8 11,085

貌似现在Web设计都喜欢给页面加入淡入淡出效果,包括导航菜单、TAB菜单、图片幻灯等。如果整个页面也有一个淡入淡出的特效,可以让浏览者有一个暂短的视频休息间隙,是不是也很不错,将下面代码添加到</head>标签前,记得不要忘了加载jQuery库,
简单的淡入效果:

  1. <script type="text/javascript">
  2. //页面淡入淡出
  3. $(document).ready(function() {
  4. $('body').hide().fadeIn(1000);
  5. });
  6. </script>

淡入淡出代码:

  1. <script type="text/javascript">
  2. //页面淡入淡出
  3. $(document).ready(function(){
  4. $("body").css("display","none");
  5. $("body").fadeIn("slow");
  6. $("a[target],a[href*='javascript'],a.lightbox-processed,a[href*='#']").addClass("speciallinks");
  7. $("a:not(.speciallinks)").click(function(){
  8. $("body").fadeOut("slow");
  9. $("object,embed").css("visibility","hidden");
  10. });
  11. });
  12. </script>

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

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

例如:

  1. <script type="text/javascript">
  2. //页面淡入淡出
  3. if(!+[1,]);else
  4. $(document).ready(function() {
  5. $('#wrapper').hide().fadeIn(1000);
  6. });
  7. </script>

另外,选择body整个面可能对浏览器造成负担,可替换成某个标签选择器,只让部分DIV显示淡入淡出效果,比如上面的改为#wrapper。
淡入淡出代码参考自:http://xdrupal.org/jQuery-page-fadein-fadeout

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  7   博主  0   引用   1

    • gsid 2

      深夜写博,勤而实习之

      • chedan 0

        恩 华丽的背后总是要付出点代价的

        • 袜子批发 1

          楼主很给力

          • 内衣内裤批发 1

            期待有更多的好作品

            • 曾平 0

              现在来讲,很重要的哦

              • 败家 0

                学习了,,

                • 加载jQuery库 0

                  請問加载jQuery库是什麼意思

                • 来自外部的引用: 1

                  • jQuery实现页面淡入淡出 | VPC.cc