javascript

位置:IT落伍者 >> javascript >> 浏览文章

利用jQuery实现页面渐显效果


发布日期:2018年01月08日
 
利用jQuery实现页面渐显效果

最近在看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: offsettop left: offsetleft width: $j(#bodyDiv)width() height: $j(form)height() backgroundColor: White opacity: position: absolute })//给hideDiv添加样式

if (jQueryisReady)//这里是判断页面是否加载

{

$j(#hideDiv)fadeOut();//让div逐渐消失的方法

}

});

</script>

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

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

上一篇:DataTable转为JSON数据格式代码

下一篇:一种标记是否为AJAX异步请求的思路