利用jQuery实现页面渐显效果

2016-02-19 13:57 26 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演示
呵呵！最后贴出在线演示效果！

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

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

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

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 Div中加载其他页面的实现代码

标签： Web开发

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

利用php和js实现页面数据刷新

标签： PHP

利用"XXXX.htm"和"XXX.php"两个文件来实现数据的刷新 XXXX.htm <head <script // Refresh code r_s = 0; timenow = 0; function calrs() { d = new Date(); h= d.getHours(); m = d.getMinutes(); s = d.getSeconds(); if( m < 10) m = '0'...

利用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 但...

Jquery 滑入滑出效果实现代码

标签： Web开发

CSS 代码如下： style type="text/css" #divD{ width:300px; height:100px; background-color:#CC99FF; } /style Jquery代码代码如下： script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"/script script type="text/javascript" $(document).ready(function(){ $("#btnFadein").bind("click",Fadein); //为b...

查看更多精彩>>