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

結果