JQuery 滚动条实现
博客专区 > mrliuze 的博客 > 博客详情
JQuery 滚动条实现
mrliuze 发表于2年前
JQuery 滚动条实现
  • 发表于 2年前
  • 阅读 63
  • 收藏 11
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: JQuery 滚动条实现

简述:

现在需要实现当前端向后台请求数据时,出现滚动条,当请求结束后滚动条消失

滚动图片和css文件来自网上


知识点:

1. css配置

2. 试用div遮盖block住全页面,防止表单多次提交

3. 异步回调消失滚动条


代码:

1. 首先在Html文件中添加如下div, 其中overlay是起到遮盖block页面用的

[html]  view plain copy
  1. <!-- 加载条 -->  
  2. <div id="AjaxLoading" class="showbox">  
  3.     <div class="loadingWord"></div>  
  4. </div>  
  5.   
  6. <div class="overlay"></div>  

2. css文件中定义showbox和loadingWord类

loading.css

[plain]  view plain copy
  1. @charset "utf-8";  
  2. .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 20px 0 0;background:#FFF;display:none;}  
  3. .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}  
  4. #AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}  
  5. #AjaxLoading div.loadingWord{width:200px;height:50px;line-height:50px;border:2px solid #D6E7F2;background:#fff;}  
  6. #AjaxLoading img{margin:10px 15px;float:left;display:inline;}  


3. JS实现

[javascript]  view plain copy
  1. /** 
  2.  * 显示loading条 
  3.  * words 显示的信息 
  4.  */  
  5.  function showLoading(words){  
  6.     var h = $(document).height();  
  7.     $(".overlay").css({"height": h });    
  8.     $(".overlay").css({'display':'block','opacity':'0.4'});  
  9.     $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},0);  
  10.     $(".loadingWord ").empty();  
  11.     $(".loadingWord ").append("<img src=\"../images/loading.gif\">" + words);  
  12.  }  
  13.    
  14.    
  15. /** 
  16.  * 消除loading条 
  17.  */  
  18.  function dismissLoading(){  
  19.     $(".overlay").css({'display':'none','opacity':'0'});  
  20.     $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);  
  21.  }  

数据请求部分处理:
[javascript]  view plain copy
  1. function ajaxCallData(searchKeywords, pageNo){    
  2.     //当页面出现html填充结束后,向后台请求数据,不带查询参数  
  3.     $.ajax({  
  4.         type:"POST",  
  5.         url: "${ctx}/business/voucher",  
  6.         data: {  
  7.             'searchKeywords' :  searchKeywords,   
  8.             'action' : 'searchVoucher',  
  9.             'random' : Math.random(), //加时间戳,防止IE缓存  
  10.             'pageNo' : pageNo  
  11.         },  
  12.         dataType:"json",  
  13.         global:false,   
  14.         beforeSend: function(XHR){  
  15.            showLoading("数据加载中,请稍候...");  
  16.         },  
  17.         success: function(data){  
  18.             RenderPage(data);  
  19.         },  
  20.         error:function(){  
  21.             alert("加载失败");  
  22.             dismissLoading();  
  23.         }  
  24.     });  
  25. }  

效果是当点击的时候出现滚动条,数据拿到后消失

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 11
博文 147
码字总数 10710
×
mrliuze
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: