显示数据点的 jQuery X 射线效果

Question

我有一个客户想要一个 X 射线效果来显示可点击的数据点。滑块将用于在图像上移动查看窗口，这将在滑块移动时显示 X 射线或辅助图像。我已经调整了 Eli Kirk 的 X 射线效果 (http://elikirk.com/2013/12/02/draggable-x-ray-effect-using-css-javascript/) 以获得我目前所拥有的：http://jsfiddle.net/xfxLx/3/。它的 jQuery UI 部分很简单：

var artWidth = 300;
$(document).ready(function() {
  $('.xraySlider').slider({
    slide: function(e, ui) {
      var newLeft = (ui.value / 100) * (artWidth - 100);
      $('.xrayWindow').css({'background-position': (newLeft * -1) + 'px 0px', "left": newLeft + "px" });
}
   });
 });

我遇到的问题是制作可点击的数据点，当它滑过主图像时，窗口会显示这些数据点。数据点将是相当简单的形状（例如，黑色圆圈），用户可以在 X 射线窗口显示后单击，以显示包含更多信息的弹出窗口。我一直在努力想出一个可行的解决方案（如果这还不够糟糕，这一切都必须在 IE7 中工作，所以我也排除了画布）。

如果这种效果在列出的范围内不起作用（我已经告诉过他们可能是这种情况，因为我还没有提出可行的解决方案），那很好，但我只是想确保我我什么都没错过。

Answer 1

我已经更改了 yoput HTML，为 xray 设置了一个内部元素，它将保存点

<div class="artifact-hold">
  <div class="artifact">
    <div class="xrayUpper"></div>
    <div class="xrayWindow">
        <div class="innerXray">
            <div class="point" id="brain"></div>
            <div class="point" id="heart"></div>
        </div>
    </div>
    <br />
    <div class="xraySlider"></div>
  </div>
</div>

然后，JavaScript 略有变化

  var artWidth = 300;
  $(document).ready(function() {
    $('.xraySlider').slider({
            slide: function(e, ui) {
                var newLeft = (ui.value / 100) * (artWidth - 100);

        $('.xrayWindow').css({"left": newLeft + "px" });
        $('.innerXray').css({"left": -newLeft + "px" });
            }
        });  
  });

并且更改了 CSS 以使 xray 剪辑内容（隐藏溢出），并且内部具有背景图像而不是 xraywindow。此外，一些样式的要点。

.innerXray {
      width: 300px;
      height: 490px;
      position: absolute;
      background: url(http://s21.postimg.org/tpg6me1vb/bones.jpg) no-repeat;
      background-position: 0px 0px;
    }
.point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: red;
}
#heart {
    left: 150px;
    top: 130px;
}
#brain {
    left: 150px;
    top: 30px;
}
.xrayWindow {
    width: 100px;
    height: 490px;
    border: 2px solid rgba(255,255,255,0.5);
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

result