编程 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 IE和FF兼容性问题汇总

Feb 09 Javascript

IE6下JS动态设置图片src地址问题

Jan 08 Javascript

json属性名为什么要双引号(个人猜测)

Jul 31 Javascript

JavaScript 学习笔记之数据类型

Jan 14 Javascript

javascript 实现map集合

Apr 03 Javascript

javascript简单实现滑动菜单效果的方法

Jul 27 Javascript

如何在Linux上安装Node.js

Apr 01 Javascript

js仿微信公众平台打标签功能

Apr 08 Javascript

Vue分页组件实例代码

Apr 17 Javascript

JS库 Highlightjs 添加代码行号的实现代码

Sep 13 Javascript

Vue中使用的EventBus有生命周期

Jul 12 Javascript

如何从头实现一个node.js的koa框架

Jun 17 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 session会话的安全性分析

2011/09/08 PHP

使用php完成常见的文件上传功能(推荐)

2017/01/13 PHP

在多个页面使用同一个HTML片段的代码

2011/03/04 Javascript

Javascript this 的一些学习总结

2012/08/31 Javascript

javascript自然分类法算法实现代码

2013/10/11 Javascript

jquery 删除字符串最后一个字符的方法解析

2014/02/11 Javascript

jQuery实现瀑布流的取巧做法分享

2015/01/12 Javascript

JavaScript 学习笔记之语句

2015/01/14 Javascript

JQuery控制Radio选中方法分析

2015/05/29 Javascript

原生JS实现轮播效果+学前端的感受(防止走火入魔)

2016/08/21 Javascript

原生js实现手风琴功能（支持横纵向调用）

2017/01/13 Javascript

js 数字、字符串、布尔值的转换方法(必看)

2017/04/07 Javascript

javaScript之split与join的区别(详解)

2017/11/08 Javascript

[原创]微信小程序获取网络类型的方法示例

2019/03/01 Javascript

vue中实现Monaco Editor自定义提示功能

2019/07/05 Javascript

Vue-cli4 配置 element-ui 按需引入操作

2020/09/11 Javascript

JS操作JSON常用方法(10w阅读)

2020/12/06 Javascript

[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局

2016/02/28 DOTA

Python中__call__用法实例

2014/08/29 Python

Python中encode()方法的使用简介

2015/05/18 Python

深入浅析Python字符编码

2015/11/12 Python

python基础教程之分支、循环简单用法

2016/06/16 Python

利用Python3分析sitemap.xml并抓取导出全站链接详解

2017/07/04 Python

Win8下python3.5.1安装教程

2020/07/29 Python

python之super的使用小结

2018/08/13 Python

centos7之Python3.74安装教程

2019/08/15 Python

python 字典套字典或列表的示例

2019/12/16 Python

Python图像处理之膨胀与腐蚀的操作

2021/02/07 Python

Bodum官网：咖啡和茶壶、玻璃器皿、厨房电器等

2018/08/01 全球购物

Under Armour西班牙官网：美国知名的高端功能性运动品牌

2018/12/12 全球购物

SNIDEL官网：日本VIVI杂志人气少女第一品牌

2020/03/12 全球购物

性能测试工程师的面试题

2015/02/20 面试题

辞旧迎新演讲稿

2014/09/15 职场文书

2019奶茶店创业计划书范本，值得你借鉴

2019/08/14 职场文书

python爬虫之selenium库的安装及使用教程

2021/05/23 Python

基于docker安装zabbix的详细教程

2022/06/05 Servers