1.html结构:
<
div
class=
"
out
">
<
div
class=
"
inner
">
<
span>0%</
span>
</
div>
</
div>
2. css样式:
<
style>
.out {
width
:
1200
px;
height
:
20
px;
border
:
2
px
solid
blue;
border-radius
:
10
px;
overflow
:
hidden;
margin
:
400
px
auto;
position
:
relative;
}
.inner {
height
:
20
px;
width
:
0;
background-color
:
yellowgreen;
}
span {
color
:
red;
font-size
:
18
px;
line-height
:
20
px;
position
:
absolute;
left
:
50
%;
}
3. js代码:
<
script
src=
"
./jquery.min.js
"></
script>
<
script>
$(
function () {
$(
'
.inner
').
animate({
// 动画的终点是inner的宽度等于out的宽度
width
:
$(
'
.out
').
width(),
},
10000,
function () {
// alert('加载完毕');
})
//设置计时器,动态的改变span的文本显示
var timerID
=
setInterval(
function () {
// 显示进度百分比
var num
=
Math.
floor(
$(
'
.inner
').
width()
/
$(
'
.out
').
width()
*
100);
$(
'
span
').
html(num
+
'
%
');
},
100)
})
</
script>