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 相关文章推荐
一些常用的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