bootstrap拖动div_Bootstrap 用于分步演示的移动触摸滑块栏

HTML

导入代码模板：

var sliderChanged = function (changeObj) {

var selector = 0;

var callouts = [

'.callout-one',

'.callout-two',

'.callout-three',

'.callout-four'

];

var newVal = changeObj.value.newValue;

var modulus = newVal % 100;

var opacity = modulus >= 87 || modulus == 0 ? 1 : modulus / 100;

if (newVal == 0) {

opacity = 0;

}

if (newVal > 0 && newVal <= 100) {

selector = 0;

} else if (newVal > 100 && newVal <= 200) {

selector = 1;

} else if (newVal > 200 && newVal <= 300) {

selector = 2;

} else if (newVal > 300 && newVal <= 400) {

selector = 3;

}

$(callouts[selector]).css({

'display': 'block',

'opacity': opacity

});

for (var c = 0; c < selector; c++) {

if (window.CP.shouldStopExecution(1)) {

break;

}

$(callouts[c]).css({

'display': 'block',

'opacity': 1

});

}

window.CP.exitedLoop(1);

for (var i = selector + 1; i < callouts.length; i++) {

$(callouts[i]).fadeOut('fast');

}

};

$('#ex13').slider({

ticks: [

0,

100,

200,

300,

400

],

ticks_labels: [

'Ready',

'Head Tilt',

'Chin Lift',

'Legs',

'Chest'

],

ticks_snap_bounds: 12,

tooltip: 'hide',

value: 0

}).change(sliderChanged);