当前位置:  编程技术>jquery

jquery进度条效果示例

    来源: 互联网  发布时间:2014-10-09

jquery进度条效果演示:

js进度条源码:
 

代码示例:

<!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>jquery实现进度条-www.yuju100.com</title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
function progressBar(){
//初始化js进度条
$("#bar").css("width","0px");
//进度条的速度,越小越快
var speed = 20;

bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//宽度要不能大于进度条的总宽度
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//进度条读满后,停止
clearInterval(bar);
}
},speed);
}
</script>
</head>

<body>
<input type="button" value="开始" onclick="progressBar()" />
<div ><div id="bar"></div></div>
</body>
</html>

以上分享了jquery进度条的一个例子,与js进度条实现原理大致相同,大家可以研究下。

您可能感兴趣的文章:
  • 简单型jQuery进度条插件的实现代码
  • jquery简单进度条一例

    
相关技术文章:
    ▪jquery进度条代码 jquery模拟页面加载进度

     jquery模拟页面加载进度条 因为无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢? 页面是从上往下执行的,可以大致估算出在页面的某个位置加载了多少,而后用jquery模拟出一个进度条来显示。 效果图,如下: 首先,先画一个进度条的样子,也就是上图图中的样子。 1,css样式代码   .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative} .jindu{floa......


    ▪jquery进度条实现代码一例

     jquery进度条实现代码 效果图: 1,html代码:   <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jquery进度条列-www.</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><td>备注</td><td>其他</td></tr>......


    ▪jquery动画特效,jquery动画实例教程

     jQuery动画特效实例分享 1.自制折叠内容块   代码示例: <div class="module">   <div class="caption">     <span>标题</span>     <img src="rollup.gif" alt="rollup" title="rolls up this module"/>   </div>   <div class="body">     近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2015,169IT.COM,站长邮箱:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号