html5+css3 3D滑块进度条拖动动画特效免费下载

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

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

评论0

请先

没有账号? 忘记密码?

社交账号快速登录