利用jq如何让这种经验条上的球根据经验比例变化

[qq_38205607]

就是css是这个
.progressbar-in{
background-color: #009fe7;
height: 3px;
width: 10px;
max-width: 680px;
transition-property: width;
transition-duration: .5s;
transition-timing-function: linear;
transition-delay: 0;
}这个是经验条
.lv-m1{
float: left;
font-size: 8px;
width: 12px;
height:12px;
background: #019fe8;
border-radius: 14px;
border: 0;
margin-top: -8px;
margin-left: 68px;
}这个是上面蓝色小球
用了js
$(".progressbar-in").width("50%");
怎样才能做到根据progressbar-in的width变化改变lv-m1的颜色
就比如到达多少以后就变成蓝色
原来是灰色

[qq_38205607]

求大神帮忙啊

[天际的海浪]

用两个div层让其重叠在一起，上层为蓝色，下层为灰色。 并且上层设置overflow: hidden;

[zhangsheng_1992]

做两套 放在一个大div里面 类似这种

<div class="top">
       <div class="huise"></div>
       <div class="lanse"></div>
</div>

然后给top设置相对定位 蓝色设置 0 0的绝对定位

.top{position:relative}
.lanse{position:absolute;top:0;left:0;overflow:hidden;widht:0;height:20px}

然后根据经验条的比例动态去设置.lanse的width属性即可 overflow:hidden 这个很重要