html5+css3 3D滑块进度条拖动动画特效

来源:https://www.sucaihuo.com/js/4169.html 2019-01-23 11:05浏览(828) 收藏

html5+css3 3D滑块进度条拖动动画特效,3款非常美观的3D立体进度条样式,可点击或拖动改变进度条百分比值。
html5+css3 3D滑块进度条拖动动画特效
分类:css3 > 进度条 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script>
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();
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2