您的位置：首页 > Web前端 > JQuery

jQuery实现简单进度条效果

2015-12-07 23:05 645 查看

一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现的简单进度条效果</title>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:orange;
}
</style>
</head>
<div id="web_loading">
<div></div>
</div>
<script src="./jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
　　jQuery(document).ready(function(){
　　　　jQuery("#web_loading div").animate({width:"100%"},800,function(){
　　　　　　setTimeout(function(){
　　　　　　　　　　　　jQuery("#web_loading div").fadeOut(500);
　　　　 　　 });
　　　　 });
　　 });
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航