Question

我是新的jQuery。我想创建一个滑块，它将沿着图像的x轴移动绿线，如图所示。从图像中可以看到有两条线（第1行，第2行）。我有JSON对象中的行的值（x，y）。

当我移动滑块时，我希望通过迭代所提供的JSON对象来显示图像旁边提供的文本框中两条线之间的距离。我希望当我在图像上滑动滑块时，距离会动态变化。

我遇到了不同种类的jQuery UI滑块。我找不到任何与我需要相关的例子。因此，在这里寻求帮助。提前谢谢。

Answer 1

.tooltip {
	width: 1px;
	height: 512;
    position: absolute;
    bottom:100%;
}

<html>
<head>
<title>
	This is an example of slider feature
</title>
</head>
<body>
	<img src="https://s31.postimg.org/vkcjhvwgr/output.png">
	<div class="vr">&nbsp;</div>
	<div id="json-slider"></div>
	<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(){
	var ilmJson = [
	[4.0, 113.0],
	[5.0, 114.0],
	[6.0, 114.0],
	[7.0, 114.0],
	[8.0, 113.0],
	[9.0, 114.0],
	[10.0, 114.0],
	[11.0, 114.0],
	[12.0, 114.0],
	[13.0, 114.0],
	[14.0, 114.0],
	[15.0, 114.0],
	[16.0, 114.0],
	[17.0, 114.0],
	[18.0, 115.0],
	[19.0, 115.0],
	[20.0, 115.0],
	[21.0, 115.0],
	[22.0, 115.0],
	[23.0, 115.0],
	[24.0, 114.0],
	[25.0, 114.0],
	[26.0, 115.0],
	[27.0, 115.0],
	[28.0, 115.0],
	[29.0, 115.0],
	[30.0, 115.0],
	[31.0, 115.0],
	[32.0, 115.0],
	[33.0, 116.0],
	[34.0, 116.0],
	[35.0, 116.0],
	[36.0, 115.0],
	[37.0, 116.0],
	[38.0, 116.0],
	[39.0, 116.0],
	[40.0, 116.0],
	[41.0, 116.0],
	[42.0, 116.0],
	[43.0, 116.0],
	[44.0, 116.0],
	[45.0, 116.0],
	[46.0, 116.0],
	[47.0, 116.0],
	[48.0, 116.0],
	[49.0, 116.0],
	[50.0, 116.0],
	[51.0, 116.0],
	[52.0, 116.0],
	[53.0, 116.0],
	[54.0, 116.0],
	[55.0, 116.0],
	[56.0, 116.0],
	[57.0, 116.0],
	[58.0, 117.0],
	[59.0, 117.0],
	[60.0, 117.0],
	[61.0, 117.0],
	[62.0, 117.0],
	[63.0, 117.0],
	[64.0, 117.0],
	[65.0, 117.0],
	[66.0, 117.0],
	[67.0, 117.0],
	[68.0, 117.0],
	[69.0, 117.0],
	[70.0, 117.0],
	[71.0, 117.0],
	[72.0, 117.0],
	[73.0, 117.0],
	[74.0, 117.0],
	[75.0, 117.0],
	[76.0, 117.0],
	[77.0, 117.0],
	[78.0, 117.0],
	[79.0, 117.0],
	[80.0, 117.0],
	[81.0, 117.0],
	[82.0, 117.0],
	[83.0, 117.0],
	[84.0, 117.0],
	[85.0, 117.0],
	[86.0, 117.0],
	[87.0, 118.0],
	[88.0, 118.0],
	[89.0, 118.0],
	[90.0, 117.0]
];

var rpeJson = [
	[4.0, 167.0],
	[5.0, 167.0],
	[6.0, 167.0],
	[7.0, 167.0],
	[8.0, 168.0],
	[9.0, 168.0],
	[10.0, 168.0],
	[11.0, 168.0],
	[12.0, 168.0],
	[13.0, 168.0],
	[14.0, 168.0],
	[15.0, 168.0],
	[16.0, 168.0],
	[17.0, 168.0],
	[18.0, 168.0],
	[19.0, 168.0],
	[20.0, 168.0],
	[21.0, 169.0],
	[22.0, 168.0],
	[23.0, 168.0],
	[24.0, 169.0],
	[25.0, 169.0],
	[26.0, 170.0],
	[27.0, 169.0],
	[28.0, 169.0],
	[29.0, 169.0],
	[30.0, 168.0],
	[31.0, 169.0],
	[32.0, 169.0],
	[33.0, 169.0],
	[34.0, 170.0],
	[35.0, 170.0],
	[36.0, 170.0],
	[37.0, 170.0],
	[38.0, 170.0],
	[39.0, 171.0],
	[40.0, 170.0],
	[41.0, 170.0],
	[42.0, 171.0],
	[43.0, 171.0],
	[44.0, 170.0],
	[45.0, 170.0],
	[46.0, 171.0],
	[47.0, 171.0],
	[48.0, 171.0],
	[49.0, 171.0],
	[50.0, 171.0],
	[51.0, 171.0],
	[52.0, 171.0],
	[53.0, 171.0],
	[54.0, 172.0],
	[55.0, 171.0],
	[56.0, 172.0],
	[57.0, 171.0],
	[58.0, 172.0],
	[59.0, 172.0],
	[60.0, 172.0],
	[61.0, 172.0],
	[62.0, 172.0],
	[63.0, 172.0],
	[64.0, 172.0],
	[65.0, 173.0],
	[66.0, 173.0],
	[67.0, 173.0],
	[68.0, 173.0],
	[69.0, 173.0],
	[70.0, 173.0],
	[71.0, 173.0],
	[72.0, 173.0],
	[73.0, 173.0],
	[74.0, 173.0],
	[75.0, 173.0],
	[76.0, 173.0],
	[77.0, 174.0],
	[78.0, 174.0],
	[79.0, 174.0],
	[80.0, 174.0],
	[81.0, 174.0],
	[82.0, 174.0],
	[83.0, 174.0],
	[84.0, 174.0],
	[85.0, 174.0],
	[86.0, 174.0],
	[87.0, 174.0],
	[88.0, 174.0],
	[89.0, 174.0],
	[90.0, 175.0]
];

$("#json-slider").slider({
	value: 0,
	min: 0,
	max: 1023,
	step: 1,
	slide: function(event, ui){
		var dist = rpeJson[ui.value][1] - ilmJson[ui.value][1];
		$("#distance").val(dist);
		var curValue = ui.value;
		var tooltip = '<div class="tooltip"></div>';

    	$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
	}
});
});

</script>

</body>
</html>

由于某些限制，我无法在此发布整个JSON。但这个功能目前对我有用。希望，这有助于某人。

创建一个滑块以动态显示图像中两条线的距离

1 个答案: