利用jQuery实现页面渐显效果

2016-02-19 13:57 27 1 收藏

下面这个利用jQuery实现页面渐显效果教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！

【 tulaoshi.com - Web开发】

最近在看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演示
呵呵！最后贴出在线演示效果！

来源:http://www.tulaoshi.com/n/20160219/1605758.html

上一篇：黑夜、伤心的哭泣 - QQ伤感分组
下一篇： jQuery 5款相关插件

看过《利用jQuery实现页面渐显效果》的人还看了以下文章更多>>

jQuery Div中加载其他页面的实现代码

标签： Web开发

经过一翻尝试，终于找到了一个自大比较满意的解决方法，现写在自己的博客中与大家分享。第一步需要在签核页面中提供一个区域用来显示表单内容，这里使用的是DIV。代码如下: script type="text/javascript" $(document).ready(function() { loadPage("doc_view", "？php echo $this-doc_view_url . '/flag/1'; ？"); }); /script ？ph...

jQuery插件实现css3效果

标签： Web开发

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果，但是目前支持css3的浏览器少之又少，往往了实现圆角效果要去写一堆代码，下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...

jQuery 全选效果实现代码

标签： Web开发

多选效果如下图代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...

利用jQuery 实现GridView异步排序、分页的代码

标签： Web开发

每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个tab可以直接应用另外一个页面如：代码如下： div id="container" ul lia href="#fragment-1"span备份/span/a/li lia href="Restore.aspx"span还原/span/a/li /ul /div 但...

利用AJAX实现实现web页面的模态对话框