Question

首先，对不起，因为这可能是一个远景。我的编码知识非常有限，我经常做的一切都是基于教程和周围看到的代码。

基本上，我创建了this site，其中包含画廊和机构列表。当鼠标悬停在场地名称上时，会出现一个带有图像的工具提示，该图像随鼠标移动。我真的很喜欢这种效果，但意识到在像笔记本电脑这样的小屏幕上效果不佳。

是否有任何简便的方法来修改此js，以便可以固定并响应全屏（覆盖整个屏幕）的图像？

<script language="javascript" type="text/javascript">
      var tooltipSpans = document.getElementsByClassName('tooltip-span');
      window.onmousemove = function (e) {
      var x = e.clientX,
        y = e.clientY,
        i, l = tooltipSpans.length;
      for(i = 0; i < l; i++) {
          tooltipSpans[i].style.top = (y + 20) + 'px';
          tooltipSpans[i].style.left = (x + 20) + 'px';
        }
      };
</script>

非常感谢您！

Answer 1

您可以将图像设置为人体标签的背景图像。并设置以下样式：

#container {
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
}

此处对javascript进行了更改：

window.onmousemove = function (e) {
  var i, l = tooltipSpans.length;
  for(i = 0; i < l; i++){
    var backgroundimageSRC = tooltipSpans[i].children.getAttribute("src");
    document.getElementById("conatiner").style.backgroundImage = "url("+ backgroundimageSRC +")";
  }
}

也许您需要进行一些更改。但是我认为它将神奇。

全屏图片提示

1 个答案: