利用jQuery实现页面渐显效果

北大青鸟大学城校区logo 北大青鸟大学城校区
招生简章校园环境师资力量就业明星招生问答软件工程师北京大学学历学员项目联系我们 报名通道

免费在线咨询通道>>

免费在线报名通道>>

北大青鸟报名电话
当前位置:北大青鸟 > 软件教程 > .net开发 >

利用jQuery实现页面渐显效果

标签:   分类:.net开发


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

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

如下所示:

<html>

<body>

<div id="bodyDiv">

<!--省略内部标签-->

</div>

<div id="hideDiv"></div>

</body>

</html>

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

贴出jQuery代码

<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>

自己琢磨出来实现渐显页面的思路,也不知道大家的思路是什么样的如果有更好的方法欢迎大家一起研究啊!


若有疑问请拨打北大青鸟咨询热线:010-80146691或点击免费在线咨询!
  • xml地图 网站地图 招生简章 合作企业 学员项目 联系我们
  • 关闭窗口