编程 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实现的仿Flash广告图片轮换效果

Apr 24 Javascript

javascript 触发事件列表比较不错

Sep 03 Javascript

jQuery随机切换图片的小例子

Apr 18 Javascript

javascript两种function的定义介绍及区别说明

May 02 Javascript

利用javascript数组长度循环数组内所有元素

Dec 27 Javascript

从js向Action传中文参数出现乱码问题的解决方法

Dec 29 Javascript

JavaScript实现带箭头标识的多级下拉菜单效果

Aug 27 Javascript

JavaScript中Promise的使用详解

Feb 26 Javascript

详解关于react-redux中的connect用法介绍及原理解析

Sep 11 Javascript

jQuery中可见性过滤器简单用法示例

Mar 31 jQuery

JavaScript设计模式之装饰者模式定义与应用示例

Jul 25 Javascript

vue 项目中当访问路由不存在的时候默认访问404页面操作

Aug 31 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

You might like

php的一个登录的类 [推荐]

2007/03/16 PHP

php 利用array_slice函数获取随机数组或前几条数据

2015/09/30 PHP

php 人员权限管理(RBAC)实例(推荐)

2017/05/24 PHP

php 后端实现JWT认证方法示例

2018/09/04 PHP

PHP使用 Pear 进行安装和卸载包的方法详解

2019/07/08 PHP

关于 byval 与 byref 的区别分析总结

2007/10/08 Javascript

菜鸟javascript基础整理1

2010/12/06 Javascript

原生js和jquery中有关透明度设置的相关问题

2014/01/08 Javascript

用js闭包的方法实现多点标注冒泡示例

2014/05/29 Javascript

什么是 AngularJS？AngularJS简介

2014/12/06 Javascript

js实现禁止中文输入的方法

2015/01/14 Javascript

javascript实现全角半角检测的方法

2015/07/23 Javascript

js实现商品抛物线加入购物车特效

2020/11/18 Javascript

JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

2016/06/24 Javascript

AngularJS equal比较对象实例详解

2016/09/14 Javascript

微信小程序 MINA文件结构

2016/10/17 Javascript

AngularJS extend用法详解及实例代码

2016/11/15 Javascript

JS获取年月日时分秒的方法分析

2016/11/28 Javascript

过期软件破解办法实例详解

2017/01/04 Javascript

微信小程序动态绑定数据及动态事件处理

2017/03/14 Javascript

JS简单实现数组去重的方法示例

2017/03/27 Javascript

JS面向对象编程基础篇（三）继承操作实例详解

2020/03/03 Javascript

JavaScript检测是否开启了控制台（F12调试工具）

2020/10/02 Javascript

[01:17:12]职来职往完美电竞专场

2014/09/18 DOTA

[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/20 DOTA

Python打印斐波拉契数列实例

2015/07/07 Python

浅谈机器学习需要的了解的十大算法

2017/12/15 Python

python爬虫_实现校园网自动重连脚本的教程

2018/04/22 Python

python字符串循环左移

2019/03/08 Python

Python学习笔记之列表推导式实例分析

2019/08/13 Python

Python with语句用法原理详解

2020/07/03 Python

pytorch简介

2020/11/11 Python

删除pycharm鼠标右键快捷键打开项目的操作

2021/01/16 Python

说谎欺骗人检讨书300字

2014/11/18 职场文书

客户付款通知书

2015/04/23 职场文书

Django中的JWT身份验证的实现

2021/05/07 Python