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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
JavaScript 常用函数
Dec 30 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
javascript 回调函数详解
Nov 11 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
微信小程序左右滚动公告栏效果代码实例
Sep 16 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实现可自定义样式的分页类
2016/03/29 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
单链表反转python实现代码示例
2018/02/08 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
python regex库实例用法总结
2021/01/03 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
质量月活动总结
2014/08/26 职场文书
行政介绍信范文
2015/05/04 职场文书
农业项目投资意向书
2015/05/09 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android