- 浏览: 758032 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
文章分类:
第一种方法:
页面 Loading 条基本人人都会用。它的原理很简单:在页头放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS 隐藏掉,即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序,Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ,每个 JS 用于逐步增加 Loading 条的宽度,那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感,同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果,其完全可以与浏览器自带的状态条媲美。
要得到演示上的进度条效果,首先 ,引入 jQuery 框架(一定要放在页头 <head>
标签内)。然后在 <body> 标签起始位置放置:
<div id="loading"><div></div></div>
CSS 可以这么写:
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着 ,请随意发挥,依照你对图二的理解,在模板各个部分的适当位置放置:
<script type="text/javascript">
$("#loading div").animate({width:"16px "})
</script>
其中红色数值应该随载入顺序逐步增加,直到 footer.php。另外别忘了在 footer.php 最末尾放上:
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
第二种
第三种 导向型
第四种 本页
第一种方法:
页面 Loading 条基本人人都会用。它的原理很简单:在页头放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS 隐藏掉,即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序,Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ,每个 JS 用于逐步增加 Loading 条的宽度,那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感,同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果,其完全可以与浏览器自带的状态条媲美。
要得到演示上的进度条效果,首先 ,引入 jQuery 框架(一定要放在页头 <head>
标签内)。然后在 <body> 标签起始位置放置:
<div id="loading"><div></div></div>
CSS 可以这么写:
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着 ,请随意发挥,依照你对图二的理解,在模板各个部分的适当位置放置:
<script type="text/javascript">
$("#loading div").animate({width:"16px "})
</script>
其中红色数值应该随载入顺序逐步增加,直到 footer.php。另外别忘了在 footer.php 最末尾放上:
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
第二种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loading Status Bar</title> <meta name="robots" content="noindex,follow" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>") </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <noscript>您的浏览器不支持 Javascript</noscript> <div id="loading"><div></div></div> <? for($i=0;$i<100000;$i++){ echo $i;} ?> <script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script> <? echo '<br><br><br>'; for($i=0;$i<100000;$i++){ echo $i;} ?> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)</script> <script type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loading Status Bar</title> <meta name="robots" content="noindex,follow" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>") </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <noscript>您的浏览器不支持 Javascript</noscript> <div id="loading"><div></div></div> <? for($i=0;$i<100000;$i++){ echo $i;} ?> <script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script> <? echo '<br><br><br>'; for($i=0;$i<100000;$i++){ echo $i;} ?> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500)</script> <script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)</script> <script type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script> </body> </html>
第三种 导向型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Loading</title> <style type="text/css"> .proccess{ border:1px solid; width:8px; height:8px; background:#ffffff; margin:3px; } </style> <script language="JavaScript"> var url = 'http://deographics.com/'; </script> </head> <body onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'> <div align=center> <font class=fontbig>友情提示,页面正在加载中,请等待......</font> <div align="center"> <form method="post" name="proccess"> <script type="text/javascript"> for(i=0;i<30;i++)document.write("<input class=proccess>")</script> </form> </div> <div align="center"> <script language=JavaScript> var p=0,j=0; var c=new Array('lightskyblue','white') setInterval('proccess();',100) function proccess(){ document.forms.proccess.elements[p].style.background=c[j]; p+=1; if(p==30){ p=0;j=1-j; } } </script> </div> </div> <div align="center"> <script> <!-- if (document.layers){ document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>'); }else if (document.all || document.getElementById){ document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>'); }else{ location.href = url; } //--> </script> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Loading</title> <style type="text/css"> .proccess{ border:1px solid; width:8px; height:8px; background:#ffffff; margin:3px; } </style> <script language="JavaScript"> var url = 'http://deographics.com/'; </script> </head> <body onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'> <div align=center> <font class=fontbig>友情提示,页面正在加载中,请等待......</font> <div align="center"> <form method="post" name="proccess"> <script type="text/javascript"> for(i=0;i<30;i++)document.write("<input class=proccess>")</script> </form> </div> <div align="center"> <script language=JavaScript> var p=0,j=0; var c=new Array('lightskyblue','white') setInterval('proccess();',100) function proccess(){ document.forms.proccess.elements[p].style.background=c[j]; p+=1; if(p==30){ p=0;j=1-j; } } </script> </div> </div> <div align="center"> <script> <!-- if (document.layers){ document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>'); }else if (document.all || document.getElementById){ document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>'); }else{ location.href = url; } //--> </script> </div> </body> </html>
第四种 本页
<style> #loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px} </style> </head> <body> <div id="loading">页面加载中…</div> .......... <script type="text/javascript">document.write('<style>#loading{display:none;}</style>');</script> </body> </html>
发表评论
-
JavaScript事件
2010-05-13 14:37 1230事件(上) JavaScript事件列表 事件 解说 一般 ... -
flex学习
2010-05-06 20:17 768flex学习例子, -
JSON法创建JavaScript对象
2010-01-14 21:33 873<!DOCTYPE html PUBLIC " ... -
JavaScript Math 对象与函数
2010-01-14 21:16 1149Math函数 Math.abs() -- 返回 ... -
JavaScript Date 对象与函数
2010-01-14 21:14 902JavaScript_Date对象说明 Date对象构造函数 ... -
日历控件
2010-01-13 16:03 740日历控件 编辑控件 -
访问iframe里面的javascript函数、对象,兼容IE、Firefox
2009-12-29 23:16 1512假如你当前主页面中嵌入了一个iframe,ID为:iframe ... -
document.createElement等DOM函数与属性
2009-12-18 17:05 11681、创建节点 createElemen ... -
document.createElement("A")的相关属性
2009-12-18 17:03 1912<html> <BODY> ... -
removeChild 使用注意事项
2009-12-18 16:55 845Java代码 var giftBody = document ... -
获取HTML DOM节点元素的方法
2009-12-18 16:47 1043在Web应用程序特别是Web2.0程序开发中,经常要获取页面 ... -
js 按钮交互 元素属性获取
2009-12-18 16:44 1007<html xmlns="http://www ... -
HTML DOM selectedIndex 属性
2009-12-18 16:34 1279定义和用法 selectedIndex 属性可设置或返回下拉 ... -
hyperlink 控制
2009-12-18 16:09 908<html> <head> ... -
onchange()和onblur()
2009-12-18 15:54 1389<html> <head> ... -
js动态显示时间
2009-12-18 15:48 2756<html> <head> ... -
JS时间对象
2009-12-17 18:09 1387时间对象用来操作日期和时间。 Examples 举例 Ret ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2009-12-16 17:40 7491判断select选项中 是否存在Value="pa ... -
javascript 暂定执行一段时间
2009-12-16 17:31 2096有人说window.setTimeout("func ... -
JS常用对象介绍
2009-12-16 17:22 843click() 对象.click() ------------ ...
相关推荐
jquery进度条载入特效
上图展示了传统 WordPress 模板在浏览器中的载入顺序... 要得到演示上的进度条效果,首先,引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置: 代码如下:<div id=”loa
jquery进度条载入特效.zip
基于jQuery+CSS3进度条载入特效
30 个 jQuery & CSS3 加载动画和进度栏插件
ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件、导入导出文档啊、载入网页等等。 应用场景很多,使用起来还很简单。 示例: <!DOCTYPE html> <...
jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果,载入页面是以动态的效果显示百分比对应的进度条,可以自定义颜色与数量,在js里面定义百分比的数值与颜色代码,很不错的一个百分比展示效果。
CSS3 引入jquery实现页面加载的LOADING效果,就是一个载入动画,一个加载的进度条效果,圆形小圆点在不断的旋转,当加载完毕后,自动消失,本页面由HTML5技术和jquery共同实现,LOADING和页面显示两者之间同样也加入...
CSS3 引入jquery实现页面加载的LOADING效果,就是一个载入动画,一个加载的进度条效果,圆形小圆点在不断的旋转,当加载完毕后,自动消失,本页面由HTML5技术和jquery共同实现,LOADING和页面显示两者之间同样也加入...
jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果,载入页面是以动态的效果显示百分比对应的进度条,可以自定义颜色与数量,在js里面定义百分比的数值与颜色代码,很不错的一个百分比展示效果。
新浪娱乐首页幻灯片焦点图代码是一款基于jQuery和jquery.orbit.js制作的网站使用的图片幻灯片焦点图效果代码,带有左右大箭头、播放/暂停按钮、图片载入进度条,支持图片自动轮播。
拖放区jQuery图像上传器插件参数: nameClass 上传文件名设置上传文件名单元格CSS类progressClass 上传进度栏设置进度条包装器块CSS类lineClass 上传进度行设置进度条块CSS类PreviewClass 上传预览设置图像预览块CSS...
该事件在整个文件的上传过程中定期性的被Flash控件自动触发,用以帮助开发者实时更新页面UI来制作上传进度条。 注意:该事件在Linux版本的Flash Player中存在问题,目前还无法解决。 - 传入参数 file object...
本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息。 HTML本示例基于jQuery以及相当出色的jquery.form插件,...
html5自定义视频控件,加入评论,载入弹幕,鼠标悬浮在进度条显示某时刻画面,视频卡端显示加载动画,清晰度切换等功能;并添加了弹幕隐藏显示设置,播放速度设置,镜像翻转设置。