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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP防CC攻击实现代码
2011/12/29 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python读写压缩文件的方法
2020/07/30 Python
css3中transition属性详解
2014/09/02 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
入党自我鉴定范文
2013/10/04 职场文书
会计实习期自我鉴定
2013/10/06 职场文书
策划助理岗位职责
2013/11/18 职场文书
总经理的岗位职责
2014/02/23 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
教师培训学习心得体会
2016/01/21 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫