jQuery实现打开页面渐现效果示例

更新时间：2016年07月27日 09:10:43 作者：ajunfly

这篇文章主要介绍了jQuery实现打开页面渐现效果的方法,结合实例形式分析了jQuery样式操作及页面元素的渐变效果实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现打开页面渐现效果的方法。分享给大家供大家参考，具体如下：

思路：把页面中所有的标签放到一个div中，然后再在最后添加一个空div标签fadeDiv，用fadeDiv遮挡body使fadeDiv渐现

<head>
  <title></title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      var p = $("body");
      var offset = p.offset();
      $("#fadeDiv").css({ top: offset.top, left: offset.left, width: $("#bodyDiv").width(), height: $("body").height(), backgroundColor: "white", opacity: 1, position: "absolute" });
      if (jQuery.isReady) {
        $("#fadeDiv").fadeOut(1000);
      }
    })
  </script>
  </head>
<body>
  <form id="form1">
  <div id="bodyDiv"></div>
  <div id="fadeDiv"></div>
  </form>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

超好用的jQuery分页插件jpaginate用法示例【附源码下载】
这篇文章主要介绍了超好用的jQuery分页插件jpaginate用法,结合实例形式简单分析了jQuery分页插件jpaginate的基本调用方式、参数属性及配置方法,并附带源码供读者下载,需要的朋友可以参考下
2018-12-12
推荐10款最热门jQuery UI框架
在进行Web开发时，并非所有的库都适合你的项目，但你仍需要收藏一些Web UI设计相关的库或框架，以在你需要的时候，加快你的开发效率。本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架
2014-08-08
Jquery easyui 下loaing效果示例代码
本文为大家详细介绍下Jquery easyui 下loaing效果具体是如何实现的，感兴趣的各位可以参考下
2013-08-08
jquery通过name属性取值的简单实现方法
下面小编就为大家带来一篇jquery通过name属性取值的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jQuery EasyUI右键菜单实现关闭标签/选项卡
这篇文章主要介绍了jQuery EasyUI右键菜单实现关闭标签/选项卡,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
jQuery预加载图片常用方法
这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下
2015-06-06
基于jQuery实现咖啡订单管理简单应用
这篇文章主要为大家详细介绍了基于jQuery实现咖啡订单管理的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jQuery实现动态粒子效果
这篇文章主要为大家详细介绍了jQuery实现动态粒子效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
这篇文章主要详细介绍了jQuery操纵DOM元素属性 attr()和removeAtrr()方法，非常的全面细致，在这里推荐给小伙伴们。
2015-01-01
jquery 延迟执行实例介绍
延迟执行在某些特殊的情况下还是蛮有用的，实现的方法也很简单，本文有个不错的示例，有需要的朋友可以参考下，希望对大家有所帮助
2013-08-08