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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

ajunfly   2020-05-15 我要评论

本文实例讲述了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程序设计有所帮助。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们