web Form进度条

Css

        /*进度条*/
        .box {
            position: relative;
            width: 210px;
            height: 50px;
            border: 1px solid #fffdfd;
            margin: 0 0 0 0;
        }

        .bg {
            height: 10px;
            margin-top: 19px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }

        .bgcolor {
            background: #5889B2;
            width: 0;
            height: 10px;
            border-radius: 5px;
        }

        .bt {
            width: 24px;
            height: 24px;
            background-color: #494990;
            border-radius: 17px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            margin-left: -11px;
            top: 12px;
            cursor: pointer;
        }

        .text {
            width: 210px;
            margin: 0 auto;
            font-size: 16px;
            line-height: 2em;
        }
        /*进度条*/

aspx

  <div class="box" id="box1">
                                                        <div class="bg" id="bg1">
                                                            <div class="bgcolor" id="bgcolor1"></div>
                                                        </div>
                                                        <div class="bt" id="bt1"></div>
                                                    </div>

//进度条
        (function ($) {
            var $box = $('#box1');
            var $bg = $('#bg1');
            var $bgcolor = $('#bgcolor1');
            var $btn = $('#bt1');
            var $numAuditPriceScore = $('#ctl00_CH_rp2_numAuditPriceScore_I');
            var statu = false;
            var ox = 0;
            var lx = 0;
            var left = 0;
            var bgleft = 0;
            $btn.mousedown(function (e) {
                lx = $btn.offset().left;
                ox = e.pageX - left;
                statu = true;
            });
            $(document).mouseup(function () {
                statu = false;
            });
            $box.mousemove(function (e) {
                if (statu) {
                    left = e.pageX - ox;
                    if (left < 0) {
                        left = 0;
                    }
                    if (left > 200) {
                        left = 200;
                    }
                    $btn.css('left', left);
                    $bgcolor.width(left);
                    $numAuditPriceScore.val(parseInt(left / 2));
                }
            });
            $bg.click(function (e) {
                if (!statu) {
                    bgleft = $bg.offset().left;
                    left = e.pageX - bgleft;
                    if (left < 0) {
                        left = 0;
                    }
                    if (left > 200) {
                        left = 200;
                    }
                    $btn.css('left', left);
                    $bgcolor.stop().animate({  left }, 200);
                    $numAuditPriceScore.val(parseInt(left / 2));
                }
            });
        })(jQuery);

 后台绑定：

   numAuditPriceScore.ClientSideEvents.LostFocus = "function(s,e){  var AuditPriceScore = $('#ctl00_CH_rp2_numAuditPriceScore_I').val(); $('#bt1').css('left', parseInt(AuditPriceScore * 2));$('#bgcolor1').stop().animate({  parseInt(AuditPriceScore * 2) }, 200);}";