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 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
Vue Element plus使用方法梳理
Dec 24 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递归删除指定文件夹的方法小结
2015/04/20 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python实现拓扑排序的基本教程
2018/03/11 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
flask开启多线程的具体方法
2020/08/02 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
会计专业毕业生自荐信范文
2013/12/20 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014年信用社工作总结
2014/11/25 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
唐山大地震观后感
2015/06/05 职场文书
环保宣传语大全
2015/07/13 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技