• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

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

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-06点击:
   

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

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

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

  如下所示:

<html>
<body>
<div id="bodyDiv">
<!--省略内部标签-->
</div>
<div id="hideDiv"></div>
</body>
</html>

 

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

  贴出jQuery代码

  Code

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

标签: jquery 浅析 页面

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ