jQuery实现页面淡入淡出

知更鸟 2011年3月14日23:01:26811.8K16

貌似现在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
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 将下面代码添加到网页适当位置即可。 <script src="https://l2dwi...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

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

评论:8   其中:访客  7   博主  0   引用   1
    • gsid
      gsid 2

      深夜写博,勤而实习之

      • chedan
        chedan 0

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

        • 袜子批发
          袜子批发 1

          楼主很给力

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

            期待有更多的好作品

            • 曾平
              曾平 0

              现在来讲,很重要的哦

              • 败家
                败家 0

                学习了,,

                • 加载jQuery库
                  加载jQuery库 0

                  請問加载jQuery库是什麼意思

                • 来自外部的引用: 1