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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JS实现购物车基本功能
Nov 08 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文件下载类
2006/12/06 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
浅析python实现动态规划背包问题
2020/12/31 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
资深生产主管自我评价
2013/09/22 职场文书
写自荐信三大法宝
2014/01/24 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
大班幼儿评语大全
2014/04/30 职场文书
大专生找工作自荐书
2014/06/10 职场文书
公司经营目标责任书
2015/01/29 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
职工培训工作总结
2015/08/10 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers