JavaScript中的簡單范圍/值滑塊

Question

我正在嘗試使用javascript或jQuery做一個簡單的范圍/值滑塊， div一個button 。此滑塊應在沒有bootstrap或任何其他plugin或inbuild functions

我的問題是如何在div元素內移動滑塊按鈕，以及需要執行哪些mouse events ？

注意：這不是幻燈片顯示滑塊或圖像滑塊

Answer 1

看一下這個簡單的滑塊實現。 隨意使用和修改您喜歡的方式：

 document.addEventListener('DOMContentLoaded', function() { var sliders = document.querySelectorAll('.my-slider'); [].forEach.call(sliders, function(el, i) { var btn = el.firstElementChild, span = el.nextElementSibling.querySelector('span'), isMoving = false; var move = function(e) { if (isMoving) { var min = 0, max = el.offsetWidth - btn.offsetWidth, mousePos = (e.pageX - el.offsetLeft - (btn.offsetWidth / 2)), position = (mousePos > max ? max : mousePos < min ? min : mousePos), value = Math.floor((position / max) * 100); btn.style.marginLeft = position + 'px'; btn.value = value; span.textContent = value; } }; el.addEventListener('mousedown', function(e) { isMoving = true; move(e); }); document.addEventListener('mouseup', function(e) { isMoving = false; }); document.addEventListener('mousemove', function(e) { move(e); }); }); }); 

 .my-slider { width: 250px; border: 1px solid #999; border-radius: 3px; background-color: #ccc; height: 10px; line-height: 10px; } .my-slider__button { border: 1px solid #333; border-radius: 3px; margin-top: -4px; width: 18px; height: 18px; background-color: #eee; display: block; } div { margin-top: 6px; } 

 <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> 

Answer 2

您可以使用拖放事件，其屬性設置僅限於其所在的div。 查看此鏈接拖放參考指南 ，您將看到所需的一切。 使用可拖動和可拖放時，可以將移動限制為水平，也可以設置綁定到的元素。 這樣一來，您只能左右移動，限制垂直移動，並保持div的邊界。 引導程序使用相同的功能來完成任務。

這是一個基本示例，顯示了其中提到的一些內容：

     $('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

Answer 3

嘗試這個 ：

  $('img').mouseenter(function(){ //or you can use hover()
   // Set the effect type
    var effect = 'slide';

     // Set the options for the effect type chosen
    var options = { direction: "right" };

   // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $(this).toggle(effect, options, duration);
   });