创建滑块以动态显示图像中两条线的距离
Posted
技术标签:
【中文标题】创建滑块以动态显示图像中两条线的距离【英文标题】：Create a slider to dynamically display distance two lines in an image 【发布时间】：2016-10-11 17:37:42 【问题描述】：我是新的 jQuery。我想创建一个滑块，它将沿图像的 x 轴移动绿线，如您在图像中看到的那样。从图像中您可以看到有两行（第 1 行，第 2 行）。我有 JSON 对象中行的值 (x,y)。
当我移动滑块时，我想通过遍历提供的 JSON 对象在图像旁边提供的文本框中显示两行之间的距离。当我在图像上移动滑块时，我希望距离动态变化。
我遇到了不同类型的 jQuery UI 滑块。我找不到任何与我的需要相关的例子。因此，在这里寻求帮助。提前谢谢你。
【问题讨论】：
你有现有的代码吗？如果你这样做了，你能不能创建一个fiddle 让我们玩一玩？ 【参考方案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"> </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。但该功能目前对我有用。希望这对某人有所帮助。
【讨论】：
以上是关于创建滑块以动态显示图像中两条线的距离的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Chrome 会在 Firefox 显示一条线的地方画两条线？