手动--拖动条--改变字体大小

一个多月的加班，终于熬到头了，领导说下午休息一下，我就把自己工作中途写的一个简短的小demo拿出来，说是分享一下，其实还是有一些小bug,希望有人能找出，并给指错，一起进步，一起成长，想想这一个多月，过的又充实，又慌乱，希望一会会振作一些把，其他的不多说了，代码如下，自己实现效果！

实现思想：三个div，当鼠标拖动小按钮的时候，计算出左边的div class='scroll' 的宽度不断的变化，而设置的字体最大为50px, 拖动条的宽度为200px, 由此可见，当拖动的宽度为100px的时候，字体的大小为25px,以此类推，当然为了能看的=看到字体，为p 标签加了一个判断，如果小于10px,就不再随拖动条减小了。

<!DOCTYPE html >  
<html >  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>
   .dragbar{height:20px;background:#ddd;position: relative;}  
.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}
.scroll{
    height: 20px;
    position: absolute;
    top:0;
    left: 0;
    background: green;
    width: 30px;
} 
</style>
</head>  
<body>  
<div class="dragbar">
    <div class='scroll'></div>  
    <div class="draghandle"></div>  
 </div>  
 <span><b>10</b>px</span><br>
 <p>字体段落</p>
<script src='js/jquery-1.11.1.min.js'></script>
<script>
 var percent=0;  
$(function(){  
    var handle=$(".draghandle");  
    var dragbar=$(".dragbar");  
    dragbar.css("width","200px");
    handle.css({"width":"10px","top":0,"left":30});  
    var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());  
    handle.bind("mousedown",function(e){  
        var x=e.pageX;  
        var hx=parseInt(handle.offset().left);
        $(document).bind("mousemove",function(e){  
            var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx); 
　　　　　　　　// 宽度的变化  
            $('.scroll').css('width',left<=3?0:left);
　　　　　　　　// 字体的大小
            $('p').css('fontSize',parseInt((left+12)/4)<=3?0:parseInt((left+12)/4)<10?10:parseInt((left+12)/4)<=3?0:parseInt((left+12)/4));
            $('span b').text(parseInt((left+12)/4)<=3?0:parseInt((left+12)/4));
            handle.css({left:left,top:0});  
          percent=(left/maxlen*100).toFixed(0);  
          return false;  
        });  
        $(document).bind("mouseup",function(){  
            $(this).unbind("mousemove");  
        })  
    })  
    function move(percent){  
        var handle_left=maxlen*percent+dragbar.offset().left;  
        handle.animate({  
            left:handle_left,top:dragbar.offset().top         
        },{duration:1500 , queue:false});  
    }  
});    
</script>
</body>  
</html>