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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python基于locals返回作用域字典
2020/10/17 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
护士思想汇报
2014/01/12 职场文书
公司前台辞职报告
2014/01/19 职场文书
股权转让协议书
2014/04/12 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
技术入股协议书
2016/03/22 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL