Заставьте div оставаться внутри вида - PullRequest
Новая
       1

Заставьте div оставаться внутри вида

0 голосов
/ 02 февраля 2020 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>

<body>
    <div class="videoPop">
        <div class="point"></div>
        <iframe width="440" height="245"
            src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1"
            frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
        </iframe>
    </div>
    <script>
        window.onload = function () {
            var bsDiv = document.querySelector(".videoPop");
            var x, y;
            window.addEventListener("mousemove", function (event) {
                x = event.clientX;//-217
                y = event.clientY - 165;//-280
                if (typeof x !== "undefined") {
                    bsDiv.style.left = x + "px";
                    bsDiv.style.top = y + "px";
                }
            }, false);
        }
    </script>
    <style>
        .videoPop {
            background-color: #3b3b3b;
            border-radius: 0px;
            position: fixed;
            border-radius: 10px;
            width: 440px;
            height: 245px;
            z-index: 200;
            border: 5px solid #3b3b3b;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .videoPop:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 55%;
            margin-left: -55px;
            width: 0;
            height: 0;
            border-top: solid 30px #3b3b3b;
            border-left: solid 30px transparent;
            border-right: solid 30px transparent;

        }


        .videoPopLoading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
        }

        iframe {
            border-radius: 5px;
        }
    </style>
</body>

</html>

Div с видео на YouTube следует за курсором во время воспроизведения видео. Но я не хочу, чтобы видео было go сверх thw windows innerHeight и innerWidth. Я хочу, чтобы он, возможно, держался, не выходя наружу, но все еще следовал за курсором, пока он не должен go снаружи.

Также с чистыми JS нет JQuery или другими библиотеками

As you see in this image, the div goes over the innerWidth (wall) I don't want it to

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

изменено 

if (typeof x !== "undefined")

на 

if (typeof x !== "undefined" && x -225 > 0 && y -127 > 0 && x < window.innerWidth -225 && y < window.innerHeight -127)

полный код 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>

<body>
    <div class="videoPop">
        <div class="point"></div>
        <iframe width="440" height="245"
            src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1"
            frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
        </iframe>
    </div>
    <script>
        window.onload = function () {
            var bsDiv = document.querySelector(".videoPop");
            var x, y;
            window.addEventListener("mousemove", function (event) {
                x = event.clientX;//-217
                y = event.clientY - 165;//-280
                if (typeof x !== "undefined" && x -225 > 0 && y -127 > 0 && x < window.innerWidth -225 && y < window.innerHeight -127) {

                    bsDiv.style.left = x + "px";
                    bsDiv.style.top = y + "px";
                }
            }, false);
        }
    </script>
    <style>
        .videoPop {
            background-color: #3b3b3b;
            border-radius: 0px;
            position: fixed;
            border-radius: 10px;
            width: 440px;
            height: 245px;
            z-index: 200;
            border: 5px solid #3b3b3b;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .videoPop:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 55%;
            margin-left: -55px;
            width: 0;
            height: 0;
            border-top: solid 30px #3b3b3b;
            border-left: solid 30px transparent;
            border-right: solid 30px transparent;

        }


        .videoPopLoading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
        }

        iframe {
            border-radius: 5px;
        }
    </style>
</body>

</html>
1 голос
/ 02 февраля 2020

Вы можете рассчитать максимальные / минимальные значения x и y следующим образом: 

window.onload = function() {
  var bsDiv = document.querySelector(".videoPop");
  const divWidth = bsDiv.clientWidth;
  const divHeight = bsDiv.clientHeight;
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  var x, y;
  window.addEventListener("mousemove", function(event) {
    x = Math.max(event.clientX, divWidth / 2); //-217
    y = Math.max(event.clientY - 165, divHeight / 2); //-280
    x = Math.min(x, windowWidth - divWidth / 2);
    y = Math.min(y, windowHeight - divHeight / 2);
    if (typeof x !== "undefined") {
      bsDiv.style.left = x + "px";
      bsDiv.style.top = y + "px";
    }
  }, false);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
</head>

<body>
  <div class="videoPop">
    <div class="point"></div>
    <iframe width="440" height="245" src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
        </iframe>
  </div>
  <style>
    .videoPop {
      background-color: #3b3b3b;
      border-radius: 0px;
      position: fixed;
      border-radius: 10px;
      width: 440px;
      height: 245px;
      z-index: 200;
      border: 5px solid #3b3b3b;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    .videoPop:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 55%;
      margin-left: -55px;
      width: 0;
      height: 0;
      border-top: solid 30px #3b3b3b;
      border-left: solid 30px transparent;
      border-right: solid 30px transparent;
    }
    
    .videoPopLoading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
    }
    
    iframe {
      border-radius: 5px;
    }
  </style>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...