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程序设计有所帮助。

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
Javascript中的async awai的用法
May 17 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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 ftp文件上传函数(基础版)
2010/06/03 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
解决Mac下使用python的坑
2019/08/13 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
列车长先进事迹材料
2014/01/25 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
Python中的 Set 与 dict
2022/03/13 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL