现在网上有很多网页加载进度条 ，但大多都是时间固定的。 下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。 代码如下:<html> <script language=VBScript> Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad() Bar = 95 SP = 10 End Function Function Count() if Bar < 100 Then Bar = Bar + 1 setTimeout "Count()", SP else document.getElem...
加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快，但是我们的网站越来越复杂，同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候，使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式。今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件。Spin.js 最喜欢这款插件了，动画图片的长度、粗细、速度和角度都可以灵活控制，想要做成什么样都可以。源码下载...
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？ 我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。 首先我们先画一个进度条的样子，也就是上图图中的样子，这个不用过多说明，自己看代码 CSS 代码如下:*{margin:0;padding:0;font-size:12px} .loading{positio...
先給大家看看效果: 效果介紹: 鼠标滑过进度条改变进度值.兼容性: 可完美兼容IE6,IE7,IE8,Chrome,Firefox代码: 代码如下:<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> <style type="text/css"> #prg{ font-size:12px; height:100%; margin-bottom:3px; overflow:hidden; color:#2C2C2C; font-family:Arial,Tahoma,"Bitstream Vera San...
打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果 HTML结构: 代码如下:<ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em> </p><span class=vnum>79（2%）</span> </div> <li class="vl-item" id="voteItem1" > <div class="vote-item-wrap"> <h4>B：</h...
效果图如下：http://jialiren.sinaapp.com/jdt/ Html代码如下： 代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条列</title> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jdt.js"></script> </head> <body> <div id="Gridview"> <table> <tr><td>序号</td><td>进度条</td><td>进度</td...
个人使用总结： 代码如下:<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>【Progresbar插件很重要】 <script type="text/javascript"> $(document).ready(function () { $("#progress1").progressBar(68, { barImage: /content/images/progressbg_red.gif }); }); </script> <div id="prog...
第一种方法:Loading.js 代码如下://频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content：显示内容，可以为空； *imageURL：将引用JS文件的路径设置即可； *left：进度条显示位置left *top：进度条显示位置top */ function Loading(content, imageURL, left, top) { imageURL = imageURL + "Loading.jpg"; LoadTable(content, ima...
这样虽没有对功能有什么影响，可是体验总不怎么好，那如何解决这个问题了，网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的，可是我发现这个方法这样的情形下并不怎么好使。 代码如下:<div> <ul> <li><a href="1.html" target="page"></a></li> <li><a href="2.html" target="page"></a></li> <li><a href="3.html" target="page"></a></li> </ul> <div><iframe src="" id="page" name="page" frameborder...
本人对后台不是太了解，所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程。 代码如下:<!DOCTYPE html> <html> <head> <meta http-equiv="content" content="text/html charset=gb2312"> <style type="text/css"> *{margin:0; padding:0;} .uInfo{width:200px; padding:10px;} h3{margin:10px 0;} #level{width:150px; height:6px; border:1px solid #ccc; cursor:pointer;} #le{height:6px; width:0;display:block;...
New Document 加载中，请耐心等待'); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // 欧文加油！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
1.先上图，效果如下：2.使用方法 代码如下:var loader=new Ajaxloader(this._ContentID,{Text:loading......,Top:50}); loader.Show(); 3.代码列出： 代码如下:/* 处理进度条，异步加载器 */ var Ajaxloader=new Class(); Ajaxloader.prototype= { Text:数据加载中......, Parent:null, Left:0, Top:30, Initialize:function(parentid,o) { //alert(Init); Extend(this,o); if(parentid) { this.Parent=$(parentid); } return th...
其实我本来的计划是做网页设计师的，可是没有人认为我设计的好，哥到现在还没有工作，发泄一下，不多说了。 效果图需要用到的图片： 背景图片：进度显示图片：网页结构： 代码如下:<div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div> css代码： 代码 代码如下:#center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #load...
代码如下:/******************** ** js 蒙版进度条（图片） ** dingzh@jstrd.com ** 2009-12-03 *********************/ //禁止网页后退 window.history.forward(1); document.attachEvent("onkeydown",docKeyDown); function docKeyDown() { //屏蔽退格删除键 if (window.event.keyCode == 8) { if(window.event.srcElement.type != "text" && window.event.srcElement.type != "textarea" && window.event.srcElement.type != "p...
首先：建立两个类，一个是用来与资料进行连接（数据层），另一个是用来关联前一个类与页面的（逻辑层） 新建一个JScsrip.js 文件 代码如下： 代码如下:function setPgb(pgbID, pgbValue,pvalues) { if ( pgbValue <= pvalues ) { if (lblObj = document.getElementById(pgbID+_label)) { lblObj.innerHTML =Math.ceil((pgbValue/pvalues)*100) + %; // change the label value } if ( pgbObj = document.getElementById(pgbID) ) ...