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 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 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
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP防盗链代码实例
2014/08/27 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python的range和linspace使用详解
2019/11/27 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python性能测试工具locust的使用
2020/12/28 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
公司综合部的成员自我评价分享
2013/11/05 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Python 多线程处理任务实例
2021/11/07 Python