jQuery实现页面淡入淡出

知更鸟
知更鸟
知更鸟
1518
文章
6914
评论
2011年3月14日23:01:26 8 11.5K

貌似现在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经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

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