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，将内部元素设置为X射线，它将保留这些点

<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，以使X射线剪辑内容（隐藏了溢出），并且内部具有背景图像而不是X射线窗口。 此外，一些造型要点。

.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;
}

结果