可拖动的进度条

可拖动-进度条

div和h3/h4组合生成可拖动的进度条

主要是通过设置空白内容的div的背景色和内置的占比内容的颜色及比例实现视觉效果上的可拖动的进度条

基本的HTML代码如下：

<div class = "father-div">
<h3 style="width:50%;"></h3>
<h4></h4>
</div>
    温度：<span>50</span>

father-div 代表的是包含占比进度条以及拖动显示的进度条的父容器
h3代表是占比拖动条
h4代表的是鼠标在进度条上移动时提示性的进度条移动
温度后的数字显示当前进度
基本的CSS设置如下：

.father-div {
float:left;
width:200px;
height:10px;
font-size:0;
line-height:0;
background:#f2f2f2;
border:1px solid #dedede;
position:relative;
margin-top:10px;
margin-right:10px;
cursor:pointer;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
.father-div h3, .father-div h4{
margin : 0;
position:absolute;
left:-1px;
top:-1px;
height:10px;
font-size:0;
line-height:0;
width:10%;
background:#a3d9f4;
border:1px solid #187aab;
z-index:99;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
.father-div h4 { 
border:1px solid #91cdea; 
z-index:88;
}

按照如上的css设计，div囊括h3和h4标签
下面设计当鼠标的移动和点击时修改进度条的内容

    $(".father-div").on("mousemove", function(e){
var $mouse = e.pageX - $(this).offset().left;
var $span = Math.round($mouse/2);
            $(this).find('h4').stop().animate({width:$span + '%'}, 50);
            $(this).next('span').text($span);
        }).on('mouseleave', function(){
            $(this).find('h4').stop().animate({width:'10%'}, 50);
var $mousex = $(this).find('h3').width();
var $spanx = Math.round($mousex/2);  
if($spanx >= 40){
                $(this).next('span').text("过热");
            }else{
                $(this).next('span').text($spanx);
            }
        }).on("click", function(e){
var $mouse = e.pageX - $(this).offset().left;
var $span = Math.round($mouse/2);
            $(this).find('h3').stop().animate({width:$span+'%'}, 100);
if($span >= 40){
                $(this).next('span').css("color","red").text('过热');
            }else{
                $(this).next('span').css("color","white").text($span);
            }
        });

对于这一句var spanx=Math.round( mousex/2); 主要是把200px长度的div父容器等分为100份(200/2)，当移动鼠标的时候是按照+1的步长递增