jQuery实现页面淡入淡出

知更鸟
知更鸟
知更鸟
1632
文章
6929
评论
2011年3月14日23:01:26811.7K16

貌似现在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
版权声明
本站原创文章转载请注明文章出处
大自然的配色 Web前端

大自然的配色

配色是一门高深的艺术和学问,网上有很多将一些色块组合成各种色系的配色表,再冠以为什么清新、明快、时尚、稳重的名称,其实都是胡扯,你说这个配色非常高雅、明快,别人可能认为是土气、花哨,个人喜好不同,不能...
禁止查看网页源代码方法 Web前端

禁止查看网页源代码方法

总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。 禁止查看网页源代码方法 一般常用的方法是在网页中加上类似的JS代码,屏蔽屏蔽键盘和鼠标右键。 docume...
匿名

发表评论

匿名网友

:?: :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