jq简单的进度条，左右渐进进度条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<style type="text/css">
/*测试*/
.line{width: 100%;height: 4px;background: #fff;position: relative;}
.line .left{width: 4%;height: 4px;background: #ff6817;display: block;position: absolute;left: 50.1%;top: 0;}
.line .right{width: 4%;height: 4px;background: #ff6817;display: block;position: absolute;left: 49.9%;top: 0;}

</style>
</head>
<body>
<div class="line">
<span class="left"></span>
<span class="right"></span>
</div>

<script src="jquery.1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
var css = {width:'40%',left:'10%'};
$('.left').animate(css,2000,rowBack);
function rowBack () {
if(css.width === '40%'){
css = {width:'4%',left:'50.1%'}
}else if(css.width === '4%'){
css = {width:'40%',left:'10%'};
}
$('.left').animate(css,2000,rowBack);
}
var css1 = {width:'40%',left:'49.9%'};
$('.right').animate(css1,2000,rowBack1);
function rowBack1 () {
if(css1.width === '40%'){
css1 = {width:'4%',left:'49.9%'}
}else if(css1.width === '4%'){
css1 = {width:'40%',left:'49.9%'};
}
$('.right').animate(css1,2000,rowBack1);
}
</script>
</body>
</html>

posted @ 2017-05-04 16:23  MissCarrie  阅读(571)  评论(0)    收藏  举报