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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
element跨分页操作选择详解
Jun 29 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python实现汉诺塔方法汇总
2016/07/25 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
css3 transform属性详解
2014/09/30 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
横幅标语大全
2014/06/17 职场文书
人力资源管理求职信
2014/08/07 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python