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

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

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

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

美化滑塊（拖動）

隱藏原有的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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

HTML node相關(guān)的一些資料整理
HTML node相關(guān)的一些資料整理
2010-01-01
javascript中BOM基礎(chǔ)知識總結(jié)
本文主要對javascript中BOM基礎(chǔ)知識進(jìn)行總結(jié)。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
bootstrap多層模態(tài)框滾動條消失的問題
本篇文章主要介紹了bootstrap多層模態(tài)框滾動條消失的問題，具有一定的參考價值，有興趣的可以了解一下
2017-07-07
javascript實現(xiàn)blob加密視頻源地址的方法
這篇文章主要介紹了javascript實現(xiàn)blob加密視頻源地址的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
DataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實例
下面小編就為大家?guī)硪黄狣ataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript中對象property的讀取和寫入方法介紹
這篇文章主要介紹了JavaScript中對象property的讀取和寫入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫入等內(nèi)容,需要的朋友可以參考下
2014-12-12
基于element-ui組件手動實現(xiàn)單選和上傳功能
在用戶使用過程中提出一鍵導(dǎo)入的功能，需求如下:點擊導(dǎo)入按鈕顯示提示框，然后是單選框以及上傳按鈕。這篇文章主要介紹了基于element-ui組件手動實現(xiàn)單選和上傳功能,需要的朋友可以參考下
2018-12-12
HTML5游戲引擎LTweenLite實現(xiàn)的超帥動畫效果(附demo源碼下載)
這篇文章主要介紹了HTML5游戲引擎LTweenLite實現(xiàn)的超帥動畫效果,詳細(xì)分析了LTweenLite的下載,動畫效果的實現(xiàn)步驟,并附帶完整的demo實例源碼供讀者下載,需要的朋友可以參考下
2016-01-01
微信小程序自定義導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12