注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

一个在页面顶部显示的进度条效果  

2013-10-19 13:27:49|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  • 一个在页面顶部显示的进度条效果,像在智能手机上浏览网页一样,手机上的浏览器进度条一般都在屏幕顶部,一条极细的小线条,当页面加载的时候,它就不断的加载显示进度,本网页进度条特效与此十分相似,基于jquery插件实现的效果。


<title>页面顶部显示的进度条效果</title>
<div id="web_loading"><div></div></div>
<script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
jQuery(document).ready(function(){
jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
}); 
}); 
});
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style>
  评论这张
 
阅读(213)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018