通過JavaScript拖動光滑滑塊

-1

我有以下代碼。它只是循環瀏覽並以HTML形式顯示對象鍵作爲滑動條。通過JavaScript拖動光滑滑塊

jQuery(function($) { 
 
    $('#threshold').change(updateThreshold); 
 
    function updateThreshold() { 
 
     var thresholdIndex = parseInt($('#threshold').val(), 10); 
 
     $("#foldchange_threshold").html(foldchange_thresholds[thresholdIndex]); 
 
    }; 
 

 
    var foldchange_thresholds = []; 
 
    var mydata = {"3":["c","d"], 
 
        "3.5":["j","k"], 
 
        "1.5":["a","b"], 
 
        "0.5":["c","d"], 
 
        "2.0":["e","f"], 
 
        "2.5":["x","y"] }; 
 
    
 
    Object.keys(mydata).sort().forEach(function(key) { 
 
     foldchange_thresholds.push(key); 
 
     
 
     }); 
 
     
 
    $('#threshold').attr('max', foldchange_thresholds.length-1); 
 

 
    
 
    
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html> 
 

 
<body> 
 
    <!-- Display the sliding bar --> 
 
    <input id="threshold" type="range" min="0" max="1" step="1" value="0" /> 
 
    <br> 
 

 
    <!-- Show foldchange threshold --> 
 
    <div id="foldchange_threshold" style="display: inline-block; align:center;"></div> 
 

 

 
</body> 
 
</html>

當你在腳本執行通知。滑動過程滯後，拖動後停一會兒。我如何平滑拖動過程？

來源

2015-09-15 neversaint

它在我的瀏覽器中很流暢。它只是步步前進。沒有滯後。 –

對我來說也沒有滯後。像你設計的步驟一樣移動到 – forgivenson

@forgivenson：除步進移動之外是否還有其他替代方案？我的意思是比步驟更平滑。 – neversaint

我不知道它是否會解決任何事情，但你可以通過做不做的jQuery找到元素，每次它更加高效......

var $foldchange = $("#foldchange_threshold"); 
$('#threshold').change(function() { 
    var thresholdIndex = parseInt($(this).val(), 10); 
    $foldchange.html(foldchange_thresholds[thresholdIndex]); 
});

更新的要求通過在OP ...

$(function() { 
 
    var foldchange_thresholds = []; 
 
    var mydata = {"3":["c","d"], 
 
       "3.5":["j","k"], 
 
       "1.5":["a","b"], 
 
       "0.5":["c","d"], 
 
       "2.0":["e","f"], 
 
       "2.5":["x","y"] }; 
 
    
 
    Object.keys(mydata).sort().forEach(function(key) { 
 
    foldchange_thresholds.push(key); 
 
    }); 
 

 
    var $foldchange = $("#foldchange_threshold"); 
 
    $('#threshold').change(function() { 
 
    var thresholdIndex = parseInt($(this).val(), 10); 
 
    $foldchange.html(foldchange_thresholds[thresholdIndex]); 
 
    }).attr('max', foldchange_thresholds.length-1); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html> 
 

 
<body> 
 
    <!-- Display the sliding bar --> 
 
    <input id="threshold" type="range" min="0" max="1" step="1" value="0" /> 
 
    <br> 
 

 
    <!-- Show foldchange threshold --> 
 
    <div id="foldchange_threshold" style="display: inline-block; align:center;"></div> 
 
</body> 
 
</html>

來源

2015-09-15 11:34:02 freefaller

你可以舉個例子嗎？例如通過[** StackSnippet **]（https://blog.stackexchange.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/） – neversaint

不知道爲什麼這是必要的？代碼片段的問題在於它需要我複製整個代碼，這使得更難看到發生了什麼變化。我的例子不夠適合你嗎？ – freefaller

通過JavaScript拖動光滑滑塊

回答

相關問題