html进度条可拉动,html5+css3 3D滑块进度条拖动动画特效

html5+css3 3D滑块进度条拖动动画特效，3款非常美观的3D立体进度条样式，可点击或拖动改变进度条百分比值。

查看演示

下载资源：

12

次 下载资源

下载积分：

20

积分

js代码

function initInputs() {

var allInputs = document.body.querySelectorAll(".bar-input");

for (var i = 0; i < allInputs.length; i++) {

var input = allInputs[i];

var barId = input.parentNode.id;

var styleEl = document.head.appendChild(document.createElement("style"));

if (i == allInputs.length - 1) {

//set indicator

var indicator=input.parentNode.querySelector('.bar .indicator');

setBarIndicator(barId, input, styleEl, indicator);

input.oninput = setBarIndicator.bind(this, barId, input, styleEl, indicator);

input.onchange = setBarIndicator.bind(this, barId, input, styleEl, indicator);

} else {

setBar(barId, input, styleEl);

input.oninput = setBar.bind(this, barId, input, styleEl);

input.onchange = setBar.bind(this, barId, input, styleEl);

}

}

}

function setBar(barId, input, styleEl) {

styleEl.innerHTML =

"#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";

}

function setBarIndicator(barId, input, styleEl, indicatorEl) {

styleEl.innerHTML =

"#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";

indicatorEl.style.marginLeft = (input.value - 10) + '%';

indicatorEl.textContent = input.value + '%';

}

initInputs();