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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
学生安全责任书范本
2014/07/24 职场文书
2014年党员整改措施
2014/10/24 职场文书
国家助学金感谢信
2015/01/21 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python