Javascript音量滑塊可拖動手柄位置更新

我正在創建音量控制滑塊機制，並且手柄控件未正確定位。Javascript音量滑塊可拖動手柄位置更新

我已經有了一個js小提琴volume control slider

.video { 
    background: #494b43; 
    border-bottom-left-radius: 60px; 
    border-bottom-right-radius: 60px; 
    border-top-left-radius: 60px; 
    border-top-right-radius: 60px; 
    display: inline-block; 
    height: 40px; 
    margin-top: 20px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 
.sks_horizontal { 
    background-color: #63665b; 
    border-radius: 4px; 
    cursor: pointer; 
    height: 10px; 
    position: relative; 
    width: 300px; 
    top: 50%; 
    margin-top: -5px; 
} 
.sks_hhorizontal { 
    background: #0b84b2; 
    border-radius: 100px; 
    border: 5px solid #fff; 
    cursor: pointer; 
    height: 10px; 
    position: absolute; 
    width: 10px; 
    top: 50%; 
    margin-top: -10px; 
} 
.sks_progressbar { 
    background: #bbd45d; 
    display: inline-block; 
    height: 100%; 
    position: relative; 
    height: 30px; 
} 


    <div id="video" class="video"></div> 

var sks_slider = (function() { 

    var createSlider = function (elem, orientation) { 

     var sBar = document.createElement("div"); 
     var handle = document.createElement("span"); 
     sBar.id = "sks_seekbar"; 
     document.getElementById(elem).appendChild(sBar); 
     document.getElementById("sks_seekbar").appendChild(handle); 
     var pBar = document.createElement("div"); 
     pBar.id = "sks_progressbar"; 
     document.getElementById("sks_seekbar").appendChild(pBar); 


     document.getElementById("sks_seekbar").id = "sks_seekbar_horizontal"; 
     handle.className = "sks_hhorizontal"; 
     sBar.className = "sks_horizontal"; 


     $(handle).mousedown(function (e) { 
      $(document).bind("mousemove", function (e) { 
       var hDirection = ($(handle).attr("class")); 

       if (hDirection == "sks_hhorizontal") { 

        var hContainer = $(handle).parent().width(); 
        var bounds = hContainer - $(handle).width(); 
        var offset = $(sBar).offset().left; 

        var hPos = e.pageX - offset; 

        if ((hPos <= bounds && hPos >= 0)) { 
         $(handle).css({ 
          'left': hPos 
         }); 
        } 
       } 


      }); 
     }); 

     $(document).mouseup(function (e) { 
      $(document).unbind('mousemove'); 
     }); 

    } 

    return { 
     create: createSlider 
    }; 
})(); 

var elemh = $("#video").attr("id"); 
var orientationh = "horizontal"; 
sks_slider.create(elemh, orientationh);

我想我的數學可能已經當我把手拖動到中心，然後再次將其拖動它移動到右側前的代碼走向它應該的方向。

如果任何人都可以指出我要去哪裏錯了，將不勝感激。

謝謝

來源

2014-10-27 alan oreilly

我建議使用<input type="range">。這使得你的代碼更加簡單和漂亮。例如，請參閱http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range。

來源

2014-10-27 18:43:43

感謝您的建議，但我受限於使用不完全跨瀏覽器的HTML5。我認爲它是我在javascript中設置偏移和位置的數學 – 2014-10-27 18:54:47

似乎向小方移動是因爲手柄的寬度。我改變了javascript到

var offset = $(sBar).position().left; 
var hPos = e.pageX - (offset + $(handle).width());

來源

2014-10-28 09:56:36

Javascript音量滑塊可拖動手柄位置更新

回答

相關問題