jQuery实现页面淡入淡出

Web前端811.9K阅读模式

貌似现在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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  8  访客  7
    • gsid
      gsid 2

      深夜写博,勤而实习之

      • chedan
        chedan 0

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

        • 袜子批发
          袜子批发 1

          楼主很给力

          • 内衣内裤批发
            内衣内裤批发 1

            期待有更多的好作品

            • 曾平
              曾平 0

              现在来讲,很重要的哦

              • 败家
                败家 0

                学习了,,

                • 加载jQuery库
                  加载jQuery库 0

                  請問加载jQuery库是什麼意思

                匿名

                发表评论

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

                拖动滑块以完成验证