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 29 Javascript
javascript语句中的CDATA标签的意义
May 09 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue使用watch监听属性变化
Apr 30 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
php Session存储到Redis的方法
2013/11/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
python杀死一个线程的方法
2015/09/06 Python
Python模拟用户登录验证
2017/09/11 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python list运算操作代码实例解析
2020/01/20 Python
新手学python应该下哪个版本
2020/06/11 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
一封普通求职者的求职信
2013/11/20 职场文书
经济担保书范文
2014/04/02 职场文书
文明寄语大全
2014/04/11 职场文书
纪律教育月活动总结
2014/08/26 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
歼十出击观后感
2015/06/11 职场文书