html 滑动条 双向滑动,进度条（按比例双向数据滑块 兼容所以pc和移动端 可拖动）...

// 进度条2

$(window).ready(function jindu($) {

var $box = $('#box_');

var $bg = $('#bg_');

var $bgcolor = $('#bgcolor_');

var $btn = $('#bt_');

var $text = $('#text_xa_');

var $text_xa = $('#text_xa');

var statu = false;

var ox = 0;

var lx = 0;

var left = 100;

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);

$text.html('安卓:' + parseFloat(left / 2).toFixed(2) + '%');

$text_xa.html('苹果:' + parseFloat(100 - (left / 2)).toFixed(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({

width: left

}, 200);

$text.html('安卓:' + parseFloat(left / 2).toFixed(2) + '%');

$text_xa.html('苹果:' + parseFloat(100 - (left / 2)).toFixed(2) + '%');

}

});

})