编程 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 相关文章推荐

一些常用的Javascript函数

Dec 22 Javascript

jQuery 处理表单元素的代码

Feb 15 Javascript

js实现网页多级级联菜单代码

Aug 20 Javascript

javascript学习总结之js使用技巧

Sep 02 Javascript

AngularJS中的API（接口）简单实现

Jul 28 Javascript

JS去除重复并统计数量的实现方法

Dec 15 Javascript

jQuery如何跳转到另一个网页就这么简单

Dec 28 Javascript

jQuery实现的简单悬浮层功能完整实例

Jan 23 Javascript

jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

May 01 jQuery

基于JavaScript实现无缝滚动效果

Jul 21 Javascript

vue 引入公共css文件的简单方法(推荐)

Jan 20 Javascript

vue3种table表格选项个数的控制方法

Apr 14 Vue.js

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

You might like

PHILIPS L4X25T电路分析和打理

2021/03/02 无线电

10个可以简化php开发过程的MySQL工具

2010/04/11 PHP

php命令行（cli）模式下报require 加载路径错误的解决方法

2015/11/23 PHP

yii框架无限极分类的实现方法

2017/04/08 PHP

PHP操作Redis数据库常用方法示例

2018/08/25 PHP

HR vs CL BO3 第二场 2.13

2021/03/10 DOTA

jquery遍历checkbox介绍

2014/02/21 Javascript

js判断为空Null与字符串为空简写方法

2014/02/24 Javascript

jquery下拉select控件操作方法分享(jquery操作select)

2014/03/25 Javascript

如何动态加载外部Javascript文件

2015/12/02 Javascript

jQuery 限制输入字符串长度

2016/06/20 Javascript

微信js-sdk上传与下载图片接口用法示例

2016/10/12 Javascript

JavaScript 实现 Tab 点击切换实例代码

2017/03/25 Javascript

垃圾回收器的相关知识点总结

2018/05/13 Javascript

记一次webapck4 配置文件无效的解决历程

2018/09/19 Javascript

详解webpack loader和plugin编写

2018/10/12 Javascript

[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer

2020/04/28 DOTA

Python命令行参数解析模块optparse使用实例

2015/04/13 Python

python实现网站的模拟登录

2016/01/04 Python

Python 类与元类的深度挖掘 II【经验】

2016/05/06 Python

一个Python最简单的接口自动化框架

2018/01/02 Python

Python实现将json文件中向量写入Excel的方法

2018/03/26 Python

Python网络爬虫之爬取微博热搜

2019/04/18 Python

Python转换itertools.chain对象为数组的方法

2020/02/07 Python

Python进行特征提取的示例代码

2020/10/15 Python

Python读写csv文件流程及异常解决

2020/10/20 Python

EJB的角色和三个对象

2015/12/31 面试题

本科生求职简历的自我评价

2013/10/21 职场文书

中介公司区域经理岗位职责范本

2014/03/02 职场文书

买房委托公证书

2014/04/08 职场文书

团队拓展活动方案

2014/08/28 职场文书

少先队活动总结

2014/08/29 职场文书

会议主持词开场白

2015/05/28 职场文书

花木兰观后感

2015/06/10 职场文书

中秋节英文祝福语句（14句）

2019/09/11 职场文书

Python爬虫进阶之Beautiful Soup库详解

2021/04/29 Python