利用jQuery实现页面渐显效果

呼哈棒棒糖

呼哈棒棒糖

2016-02-19 13:57

下面这个利用jQuery实现页面渐显效果教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
最近在看jQuery,就在实际项目里加了个小的应用,当时的想法就是点击一个链接跳转到另个页面时,页面是逐渐显示出来,也就是由透明到实体的一个过程!
  说下思路吧,在body里用一个div把所有的标签包含住,在此div后再定义一个div,后面这个div是用来实现渐显效果的。
如下所示:
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
代码很简单吧!呵呵!wirte less do more!
自己琢磨出来实现渐显页面的思路,也不知道大家的思路是什么样的如果有更好的方法欢迎大家一起研究啊!
Ryan Gene兄提出最好加上demo演示
呵呵!最后贴出在线演示效果!
展开更多 50%)
分享

猜你喜欢

利用jQuery实现页面渐显效果

Web开发
利用jQuery实现页面渐显效果

jquery 图片Silhouette Fadeins渐显效果

Web开发
jquery 图片Silhouette Fadeins渐显效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

js模拟滤镜的图片渐显效果

Web开发
js模拟滤镜的图片渐显效果

jQuery 页面 Mask实现代码

Web开发
jQuery 页面 Mask实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax实现页面loading效果!

Web开发
Ajax实现页面loading效果!

Ajax实现页面loading效果

Web开发
Ajax实现页面loading效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

黑 夜、伤心的哭泣 - QQ伤感分组

黑 夜、伤心的哭泣 - QQ伤感分组

jQuery 5款相关插件

jQuery 5款相关插件
下拉加载更多内容 ↓