Подсказка с полноэкранным изображением - PullRequest
Новая
       32

Подсказка с полноэкранным изображением

0 голосов
/ 05 июля 2018

Прежде всего, извините, потому что, вероятно, это своего рода длинный выстрел. Мои знания в области кодирования очень ограничены, и все, что я всегда делаю, основано на учебных пособиях и кодах, которые я вижу вокруг.

По сути, я создал этот сайт со списком галерей и учреждений. Когда вы наводите курсор на название места, появляется всплывающая подсказка с изображением, которая следует за мышью. Мне очень понравился этот эффект, но я понял, что он не очень хорошо работает на маленьких экранах, таких как ноутбуки.

Есть ли какой-нибудь простой способ изменить этот 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>

Заранее большое спасибо !!!

1 Ответ

0 голосов
/ 05 июля 2018

Вы можете установить изображение в качестве фонового изображения вашего тега тела. И установите для него следующий стиль: 

#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 +")";
  }
}

Может быть, вам нужно немного измениться. Но я думаю, что это сделает волшебство.

...