编程 Javascript

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

Posted in Javascript onJuly 27, 2016

本文实例讲述了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实现打开页面渐现效果示例

- Author -

ajunfly

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS返回上一页实例代码通过图片和按钮分别实现

Aug 16 Javascript

一个JS函数搞定网页标题(title)闪动效果

May 13 Javascript

jQuery中:checkbox选择器用法实例

Jan 03 Javascript

js省市联动效果完整实例代码

Dec 09 Javascript

jQuery简单实现iframe的高度根据页面内容自适应的方法

Aug 01 Javascript

JS多物体实现缓冲运动效果示例

Dec 20 Javascript

ES6中Class类的静态方法实例小结

Oct 28 Javascript

基于Node.js实现压缩和解压缩的方法

Feb 13 Javascript

微信上传视频文件提示（推荐）

Nov 22 Javascript

JS使用栈判断给定字符串是否是回文算法示例

Mar 04 Javascript

详解小程序用户登录状态检查与更新实例

May 15 Javascript

Threejs实现滴滴官网首页地球动画功能

Jul 13 Javascript

JavaScript中的this使用详解

Jul 27 #Javascript

js删除数组元素、清空数组的简单方法(必看)

Jul 27 #Javascript

javascript简单实现等比例缩小图片的方法

Jul 27 #Javascript

第一次接触神奇的Bootstrap网格系统

Jul 27 #Javascript

Js删除数组中某一项或几项的几种方法(推荐)

Jul 27 #Javascript

javascript获取网页各种高宽及位置的方法总结

Jul 27 #Javascript

第一次接触神奇的Bootstrap表单

Jul 27 #Javascript