快捷導(dǎo)航

JavaScript實(shí)現(xiàn)美化滑塊效果

更新時(shí)間：2019年05月17日 16:22:13 作者：wangsq-js

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)美化滑塊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)美化滑塊效果的具體代碼，供大家參考，具體內(nèi)容如下

美化滑塊（拖動(dòng)）

隱藏原有的range 同步value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滑塊</title>
  <style>
    .len{
      width: 300px;
      height: 6px;
      background: #6c6;
      border-radius: 3px;
      margin-top:15px;
      position: relative;
    }
    .len b{
      display: inline-block;
      height: 6px;
      border-radius: 3px;
      background: #900;
      position: absolute;
    }
    .len span{
      position: absolute;
      width: 10px;
      height: 10px; 
      border-radius: 5px;
      background: #090;
      z-index: 1;
      top: -2px;
      left: 0;
    }
    .len input[type=range]{
      display: none;
    }
  </style>
</head>
<body>
  <input type="range" min="0" max="500" value="0">
  <input type="range" min="0" value="0">
  <script>
    var ranges=document.querySelectorAll("input[type=range]");
    ranges.forEach(function(range){
      var Div=document.createElement("div");
      Div.className="len";
      range.parentNode.insertBefore(Div,range);
      var span=document.createElement("span");
      var b=document.createElement("b");
      Div.appendChild(span);
      Div.appendChild(b);
      Div.appendChild(range);
      span.onmousedown=function(e){
        var x=e.clientX-this.offsetLeft;
        var maxL=Div.offsetWidth-span.offsetWidth;
        var maxV=range.max || 100;
        document.onmousemove=function(e){
          var les=e.clientX-x;
          if(les < 0)les=0;
          if(les > maxL)les=maxL;
          span.style.left=les+"px";
          b.style.width=les+span.offsetWidth/2+"px";
          range.value=les/maxL*maxV;   //同步
          e.preventDefault();       //阻止默認(rèn)事件
          console.log(range.value)
        }
        document.onmouseup=function(){
          document.onmousemove=null;
          document.onmouseup=null;
        }
      }
    })
  </script>
</body>
</html>

插件都可以無限復(fù)制，刪除即是原有效果

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript中break，continue和return語句用法小結(jié)
break，continue和return這三個(gè)語句的用法新手們經(jīng)常弄混淆，至少在我學(xué)習(xí)c語言的時(shí)候經(jīng)常把它們的用法給搞錯(cuò)。不過現(xiàn)在好了，我已徹底搞清楚它們之間的用法
2012-05-05
javascript貪吃蛇完整版(源碼)
這篇文章主要是對(duì)javascript貪吃蛇完整版(源碼)進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
JS事件Event元素(兼容IE,Firefox,Chorme)
今天，想聊聊JS事件對(duì)象。相信大家對(duì)于獲得激發(fā)JS事件的原對(duì)象的理解，有的人可能簡單停留在IE上。也就是window.event這個(gè)對(duì)象
2012-11-11
echarts中圖例右置且豎排完整代碼
這篇文章主要給大家介紹了關(guān)于echarts中圖例右置且豎排的相關(guān)資料,Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),需要的朋友可以參考下
2023-08-08
微信小程序?qū)崿F(xiàn)用戶登錄模塊服務(wù)器搭建
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用戶登錄模塊服務(wù)器搭建，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
js事件監(jiān)聽器用法實(shí)例詳解
這篇文章主要介紹了js事件監(jiān)聽器用法,以實(shí)例形式較為詳細(xì)的分析了javascript事件監(jiān)聽器使用注意事項(xiàng)與相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jsonp實(shí)現(xiàn)百度下拉框功能的方法分析
這篇文章主要介紹了jsonp實(shí)現(xiàn)百度下拉框功能的方法,結(jié)合實(shí)例形式分析了調(diào)用百度接口jsonp實(shí)現(xiàn)跨域請(qǐng)求及內(nèi)容渲染相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js中數(shù)組解構(gòu)與對(duì)象解構(gòu)示例代碼
數(shù)組解構(gòu)是一種在 JavaScript 中從數(shù)組中提取值并將它們分配給變量的方式,在數(shù)組解構(gòu)中分為完全解構(gòu),不完全解構(gòu),解構(gòu)失敗以及解構(gòu)默認(rèn)值,這篇文章主要介紹了js中數(shù)組解構(gòu)與對(duì)象解構(gòu),需要的朋友可以參考下
2023-09-09
Bootstrap Paginator分頁插件與ajax相結(jié)合實(shí)現(xiàn)動(dòng)態(tài)無刷新分頁效果
這篇文章主要介紹了Bootstrap Paginator分頁插件與ajax相結(jié)合實(shí)現(xiàn)動(dòng)態(tài)無刷新分頁效果，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-05-05
javascript中幾個(gè)容易混淆的概念總結(jié)
這篇文章主要介紹了javascript中幾個(gè)容易混淆的概念總結(jié)，都是平時(shí)經(jīng)常遇到的問題，這里推薦給大家，有需要的小伙伴參考下吧。
2015-04-04