我新的jQuery中動態地顯示距離兩行。我想創建一個滑塊，它將沿着圖像的x軸移動綠線，就像您在圖像中看到的一樣。從圖像中可以看到有兩條線（第1行，第2行）。我有JSON對象中行的值（x，y）。
當我移動滑塊時，我想通過遍歷所提供的JSON對象來顯示圖片旁邊提供的文本框中兩行之間的距離。當我在圖像上移動滑塊時，我希望距離動態變化。
我遇到了不同種類的jQuery UI滑塊。我找不到任何與我的需求有關的例子。因此，請在這裏尋求幫助。先謝謝你。
.tooltip {
\t width: 1px;
\t height: 512;
position: absolute;
bottom:100%;
}<html>
<head>
<title>
\t This is an example of slider feature
</title>
</head>
<body>
\t <img src="https://s31.postimg.org/vkcjhvwgr/output.png">
\t <div class="vr"> </div>
\t <div id="json-slider"></div>
\t <input id="distance" type="text">
<!-- include the jQuery and jQuery UI scripts -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<script type="text/javascript">
$(function(){
\t var ilmJson = [
\t [4.0, 113.0],
\t [5.0, 114.0],
\t [6.0, 114.0],
\t [7.0, 114.0],
\t [8.0, 113.0],
\t [9.0, 114.0],
\t [10.0, 114.0],
\t [11.0, 114.0],
\t [12.0, 114.0],
\t [13.0, 114.0],
\t [14.0, 114.0],
\t [15.0, 114.0],
\t [16.0, 114.0],
\t [17.0, 114.0],
\t [18.0, 115.0],
\t [19.0, 115.0],
\t [20.0, 115.0],
\t [21.0, 115.0],
\t [22.0, 115.0],
\t [23.0, 115.0],
\t [24.0, 114.0],
\t [25.0, 114.0],
\t [26.0, 115.0],
\t [27.0, 115.0],
\t [28.0, 115.0],
\t [29.0, 115.0],
\t [30.0, 115.0],
\t [31.0, 115.0],
\t [32.0, 115.0],
\t [33.0, 116.0],
\t [34.0, 116.0],
\t [35.0, 116.0],
\t [36.0, 115.0],
\t [37.0, 116.0],
\t [38.0, 116.0],
\t [39.0, 116.0],
\t [40.0, 116.0],
\t [41.0, 116.0],
\t [42.0, 116.0],
\t [43.0, 116.0],
\t [44.0, 116.0],
\t [45.0, 116.0],
\t [46.0, 116.0],
\t [47.0, 116.0],
\t [48.0, 116.0],
\t [49.0, 116.0],
\t [50.0, 116.0],
\t [51.0, 116.0],
\t [52.0, 116.0],
\t [53.0, 116.0],
\t [54.0, 116.0],
\t [55.0, 116.0],
\t [56.0, 116.0],
\t [57.0, 116.0],
\t [58.0, 117.0],
\t [59.0, 117.0],
\t [60.0, 117.0],
\t [61.0, 117.0],
\t [62.0, 117.0],
\t [63.0, 117.0],
\t [64.0, 117.0],
\t [65.0, 117.0],
\t [66.0, 117.0],
\t [67.0, 117.0],
\t [68.0, 117.0],
\t [69.0, 117.0],
\t [70.0, 117.0],
\t [71.0, 117.0],
\t [72.0, 117.0],
\t [73.0, 117.0],
\t [74.0, 117.0],
\t [75.0, 117.0],
\t [76.0, 117.0],
\t [77.0, 117.0],
\t [78.0, 117.0],
\t [79.0, 117.0],
\t [80.0, 117.0],
\t [81.0, 117.0],
\t [82.0, 117.0],
\t [83.0, 117.0],
\t [84.0, 117.0],
\t [85.0, 117.0],
\t [86.0, 117.0],
\t [87.0, 118.0],
\t [88.0, 118.0],
\t [89.0, 118.0],
\t [90.0, 117.0]
];
var rpeJson = [
\t [4.0, 167.0],
\t [5.0, 167.0],
\t [6.0, 167.0],
\t [7.0, 167.0],
\t [8.0, 168.0],
\t [9.0, 168.0],
\t [10.0, 168.0],
\t [11.0, 168.0],
\t [12.0, 168.0],
\t [13.0, 168.0],
\t [14.0, 168.0],
\t [15.0, 168.0],
\t [16.0, 168.0],
\t [17.0, 168.0],
\t [18.0, 168.0],
\t [19.0, 168.0],
\t [20.0, 168.0],
\t [21.0, 169.0],
\t [22.0, 168.0],
\t [23.0, 168.0],
\t [24.0, 169.0],
\t [25.0, 169.0],
\t [26.0, 170.0],
\t [27.0, 169.0],
\t [28.0, 169.0],
\t [29.0, 169.0],
\t [30.0, 168.0],
\t [31.0, 169.0],
\t [32.0, 169.0],
\t [33.0, 169.0],
\t [34.0, 170.0],
\t [35.0, 170.0],
\t [36.0, 170.0],
\t [37.0, 170.0],
\t [38.0, 170.0],
\t [39.0, 171.0],
\t [40.0, 170.0],
\t [41.0, 170.0],
\t [42.0, 171.0],
\t [43.0, 171.0],
\t [44.0, 170.0],
\t [45.0, 170.0],
\t [46.0, 171.0],
\t [47.0, 171.0],
\t [48.0, 171.0],
\t [49.0, 171.0],
\t [50.0, 171.0],
\t [51.0, 171.0],
\t [52.0, 171.0],
\t [53.0, 171.0],
\t [54.0, 172.0],
\t [55.0, 171.0],
\t [56.0, 172.0],
\t [57.0, 171.0],
\t [58.0, 172.0],
\t [59.0, 172.0],
\t [60.0, 172.0],
\t [61.0, 172.0],
\t [62.0, 172.0],
\t [63.0, 172.0],
\t [64.0, 172.0],
\t [65.0, 173.0],
\t [66.0, 173.0],
\t [67.0, 173.0],
\t [68.0, 173.0],
\t [69.0, 173.0],
\t [70.0, 173.0],
\t [71.0, 173.0],
\t [72.0, 173.0],
\t [73.0, 173.0],
\t [74.0, 173.0],
\t [75.0, 173.0],
\t [76.0, 173.0],
\t [77.0, 174.0],
\t [78.0, 174.0],
\t [79.0, 174.0],
\t [80.0, 174.0],
\t [81.0, 174.0],
\t [82.0, 174.0],
\t [83.0, 174.0],
\t [84.0, 174.0],
\t [85.0, 174.0],
\t [86.0, 174.0],
\t [87.0, 174.0],
\t [88.0, 174.0],
\t [89.0, 174.0],
\t [90.0, 175.0]
];
$("#json-slider").slider({
\t value: 0,
\t min: 0,
\t max: 1023,
\t step: 1,
\t slide: function(event, ui){
\t \t var dist = rpeJson[ui.value][1] - ilmJson[ui.value][1];
\t \t $("#distance").val(dist);
\t \t var curValue = ui.value;
\t \t var tooltip = '<div class="tooltip"></div>';
\t $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
\t }
});
});
</script>
</body>
</html>我不能在這裏發表的整個JSON由於一些限制。但該功能目前適用於我。希望這可以幫助某人。
你有任何現有的代碼？如果你這樣做，你可能會創建一個[小提琴]（https://jsfiddle.net），所以我們可以玩一玩嗎？ – Yass