通过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拖动光滑滑块

回答

相关问题