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

Question

我有一个客户想要 X 射线效果来显示可点击的数据点。 slider 将用于在图像上移动观察窗口，当 slider 移动时会显示 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 中工作，所以我也排除了 Canvas )。

如果这种效果在列出的范围内不起作用(我已经告诉他们可能是这种情况，因为我还没有想出可行的解决方案)，那很好，但我只是想确保我没有遗漏任何东西。

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 剪辑内容( overflow hidden )，并且内部具有背景图像而不是 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