浅析jQuery页面渐显效果的实现

开发 开发工具
这里我们将分析jQuery页面渐显效果的实现,通过本文希望能对大家了解jQuery有所帮助。

我们将讨论的是jQuery页面渐显效果的实现,将从代码的角度来进行讲解,希望能让大家了解jQuery页面渐显效果实现的具体步骤。

最近在看jQuery,就在实际项目里加了个小的应用,当时的想法就是点击一个链接跳转到另个页面时,页面是逐渐显示出来,也就是由透明到实体的一个过程!

说下思路吧,在body里用一个div把所有的标签包含住,在此div后再定义一个div,后面这个div是用来实现jQuery页面渐显效果的。

如下所示:

  1. <html> 
  2. <body> 
  3. <div id="bodyDiv"> 
  4. <!--省略内部标签--> 
  5. </div> 
  6. <div id="hideDiv"></div> 
  7. </body> 
  8. </html> 

我的想法是最后一个div定位在整个页面最上层,div的背景设为白色,也就完全覆盖了下面的div,当点击到该页面时,页面加载完时,上面这个div开始逐渐消失,下面的div便实现了逐渐显现的效果。

贴出jQuery代码

Code

  1. <script> 
  2.    $j(function() {  
  3.         $j("#hideDiv").css({ top: offset.top, left: offset.left, width: $j("#bodyDiv2").width(), height: $j("form").height(), backgroundColor: "White", opacity: 1, position: "absolute" })//给hideDiv添加样式  
  4.         if (jQuery.isReady)//这里是判断页面是否加载  
  5.         {  
  6.             $j("#hideDiv").fadeOut(1000);//让div逐渐消失的方法  
  7.         }  
  8. });  
  9. </script> 

代码很简单吧!呵呵!wirte less do more!

本文来自心旷神怡博客园文章《利用jQuery实现页面渐显效果

【编辑推荐】

  1. jQuery调用WCF服务传递JSON对象
  2. 学习jQuery必须知道的几种常用方法
  3. 用XML+XSLT+CSS+JQuery组建ASP.NET网站
  4. 使用jQuery和PHP构建一个受Ajax驱动的Web页面
  5. jQuery调用WCF需要注意的一些问题
责任编辑:彭凡 来源: 博客园
相关推荐

2012-01-17 14:29:38

JavaSwing

2009-07-24 10:53:51

ASP.NET实现静态

2010-09-07 09:30:25

DIV弹出jQuery

2011-05-31 09:23:58

Android Activity

2009-07-03 17:48:34

JSP页面翻译

2011-03-30 14:33:57

jQueryJavaScript

2012-07-18 20:59:40

jQuery

2012-04-10 10:41:59

jQueryASP.NET

2014-12-23 14:36:17

陌陌网易

2012-04-26 10:56:05

jQuery效果

2018-11-01 13:48:34

2017-04-12 11:46:46

前端浏览器渲染机制

2012-04-09 10:34:21

jQuery

2009-09-07 06:56:46

C#透明窗体

2011-03-02 13:15:26

HTML 5jQuery

2009-09-07 14:41:48

GridView展开与

2012-05-30 10:43:47

jQuery

2009-07-28 16:40:11

ASP.NET异步页面

2012-06-13 15:21:26

jQuery

2012-02-08 17:01:36

点赞
收藏

51CTO技术栈公众号