一个简单的jquery进度条示例_jquery
程序员文章站
2022-04-28 22:41:01
...
用jQuery实现的最简单的进度条,只有不到10行代码。样式可以直接忽略。(有一个图片需要自己找一下)
$(function(){
var i=0;
(function progressBar(){
i=i+1;
if(i>=101){
i=0;
}
$("#proc").animate({width:i+"%"},500);
$("#progressWord").text(i+"%");
setTimeout(progressBar,1500);
})();
});
.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold;
}
[CSS]代码
复制代码 代码如下:
$(function(){
var i=0;
(function progressBar(){
i=i+1;
if(i>=101){
i=0;
}
$("#proc").animate({width:i+"%"},500);
$("#progressWord").text(i+"%");
setTimeout(progressBar,1500);
})();
});
[CSS]代码
复制代码 代码如下:
.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold;
}
[HTML]代码
复制代码 代码如下:
0%
推荐阅读
-
Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享
-
关于jquery的多个选择器的使用示例_jquery
-
JQuery 中几个类选择器的简单使用介绍_jquery
-
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节_jquery
-
基于jquery的9行js轻松实现tab控件示例
-
分享一个jquery实现的产品飞入购物车的功能
-
jQuery实现简单的间隔向上滚动效果_jquery
-
关于React处理input的方法和多个input共用一个方法(不用jQuery)
-
基于jquery创建的一个图片、视频缓冲的效果样式插件_jquery
-
jquery实现弹出div,始终显示在屏幕正中间的简单实例