显示效果如图所示:
素材图片:
1.html代码:
<span style="font-size:18px;"><div class="grade_warp">
<div class="User_ratings User_grade">
<div class="ratings_bars">
<span id="title0">0</span>
<span class="bars_10">0</span>
<div class="scale" id="bar0">
<div></div>
<span id="btn0"></span>
</div>
<span class="bars_10">10</span>
</div>
</div>
</div>
<script type="text/javascript">
scale = function (btn, bar, title) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("DIV")[0];
this.init();
};
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
f.btn.onmousedown = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.onmousemove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.onmouseup = new Function('this.οnmοusemοve=null');
};
},
ondrag: function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = pos / 10 + '';
}
}
new scale('btn0', 'bar0', 'title0');
</script>
</span>
2.css样式
<span style="font-size:18px;">.grade_warp{width:450;float: left;margin-left: 10px;}
.User_grade{width:100%;}
.User_ratings {overflow: hidden;}
.User_ratings .ratings_title{width:815px;height:78px;font-family:"微软雅黑","宋体";font-size:24px;color:#aaaaaa;}
.User_ratings .ratings_title01{width:407px;height:auto;font-family:"微软雅黑","宋体";font-size:14px;color:#aaaaaa;}
.User_ratings .ratings_bars{width:407px;height:34px;padding-top: 5px;}
.User_ratings .ratings_bars #title0{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars .bars_10{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;line-height:25px;float:left;color:#a0a0a0;}
.User_ratings .ratings_bars .scale{width:299px;height:13px;float:left;margin:7px 10px auto 10px;position:relative;background:url(../../images/terminal/progress02.png) 0 0 no-repeat;}
.User_ratings .ratings_bars .scale div{width:0px;position:absolute;width:0;left:0;height:13px;bottom:0;background:url(../../images/terminal/progress02.png) 0 -14px no-repeat;}
.User_ratings .ratings_bars .scale span{width:10px;height:26px;position:absolute;left:-2px;top:-7px;cursor:pointer;background:url(../../images/terminal/j.png) no-repeat;}
</span>