C# 运用Jquery和Div实现Loading加载提示效果

加载效果图:

加载后的图：

Html代码：

[html] view plain copy

1. <div id="bg"></div>  
2.     <div id="center">  
3.         <div style="float: left; padding-top: 12px; padding-left: 5px;">  
4.             <img src="images/progressBar.gif" />  
5.         </div>  
6.         <div style="float: left; padding-top: 15px;">数据加载中，请稍后...</div>  
7.     </div>  

CSS代码：

[css] view plain copy

1. #bg  
2. {  
3.     display: none;  
4.     position: absolute;  
5.     top: 0%;  
6.     left: 0%;  
7.     width: 100%;  
8.     height: 100%;  
9.     background-color: black;  
10.     z-index: 1001;  
11.     -moz-opacity: 0.7;  
12.     opacity: .70;  
13.     filter: alpha(opacity=70);  
14. }  
15.   
16. #center  
17. {  
18.     width: 200px;  
19.     border: 1px solid #8CBEDA;  
20.     position: absolute;  
21.     top: 40%;  
22.     left: 40%;  
23.     display: none;  
24.     height: 50px;  
25.     background-color: white;  
26.     font-size: 14px;  
27.     font-weight: bold;  
28.     z-index: 1002;  
29. }  

JS代码：

[javascript] view plain copy

1. <script src="js/jquery-1.9.1.js"></script>  
2.     <script type="text/javascript">  
3.         // 库位检索  
4.         var arrLocation=new Array();  
5.         $(document).ready(function ()  
6.         {  
7.             $.ajax  
8.                 ({  
9.                     type:"GET",  
10.                     url: "WebForm4.aspx/GetAllStockData",//请求页面获取数据  
11.                     beforeSend:function()  
12.                     {  
13.                         setTimeout(function(){},5000);  
14.                         $("#bg").css("display","block");  
15.                         $("#center").css("display","block");  
16.                     },  
17.                     success: function (data)//得到数据Load加载提示消失  
18.                     {  
19.                         $("#bg").css("display","none");  
20.                         $("#center").css("display","none");  
21.                         $("#stockInfo").css("display","block");  
22.                     }  
23.                 });  
24.                  });  
25. <pre name="code" class="javascript">GetAllStockData方法里面 Thread.Sleep(1000); 挂起1000毫秒。</pre>  

需要用到的loading小图片

附加 PS：

由于有的页面显示数据过度，拖放的高度太高。又不想点击滚动条回到顶部。因此可以用Jquery来实现快速回到顶部功能

效果图前：

效果图后：

点击返回顶部则图标会消失。然后就到顶部了。

JS代码：

[javascript] view plain copy

1. <script src="js/jquery-1.9.1.js"></script>    
2.     <script type="text/javascript">  
3.         $(function () {  
4.             //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失  
5.             $(function () {  
6.                 $(window).scroll(function () {  
7.                     if ($(window).scrollTop() > 100) {  
8.                         $("#back-to-top").fadeIn(1500);  
9.                     }  
10.                     else {  
11.                         $("#back-to-top").fadeOut(1500);  
12.                     }  
13.                 });  
14.   
15.                 //当点击跳转链接后，回到页面顶部位置  
16.                 $("#back-to-top").click(function () {  
17.                     $('body,html').animate({ scrollTop: 0 }, 1000);  
18.                     return false;  
19.                 });  
20.             });  
21.         });  
22. </script>  

HTML代码：

[html] view plain copy

1. <p id="back-to-top">  
2.             <a href="#top">  
3.                 <img src="images/1.png" /><br />  
4.                 回到<br />  
5.                 顶部</a>  
6.         </p>  

CSS代码：

[css] view plain copy

1. p#back-to-top{  
2.     position:fixed;  
3.     display:none;  
4.     bottom:10px;  
5.     right:0px;  
6. }  
7. p#back-to-top a{  
8.       text-align:center;  
9.       text-decoration:none;  
10.       display:block;  
11.       font-weight:bold;  
12.       /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/  
13.        font-size:9pt;  
14.       -moz-transition:color 1s;  
15.       -webkit-transition:color 1s;  
16.       -o-transition:color 1s;  
17. }  

需要用到的回到顶部小图片