Как я могу переместить элементы в поле зрения при изменении размера окна? - PullRequest
Новая
       1

Как я могу переместить элементы в поле зрения при изменении размера окна?

1 голос
/ 19 марта 2020

У меня есть проект, который мне нужен, чтобы сделать аквариум, и рыбы внутри собираются по клику.

Я сделал все, но вот проблема, программа должна работать над изменением размера.

Что я пытаюсь сказать. Если я изменю размер окна браузера, рыбы должны снова появиться в видимом месте окна и продолжать плавать.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
    <style>
    body{background-color:aqua; width:100%; height:100%;padding:0; margin:0;}
    img{width:50px; height:50px;}
    div{position:absolute;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>
    i = 0;

    function swim(fishid){
    newLeft = Math.random()*1200; // due to new width
    newTop = Math.random()*600; //due to new height
    do_move(fishid, newTop, newLeft, Math.random()*1000);
    }

  function do_move(fishid, topPos, leftPos, timeToMove=0){
    $("#"+fishid).css({"transform": "rotateY(0deg)"});
    ll = leftPos + 'px';
    tt = topPos + 'px';
    if( parseInt($("#"+fishid).css('left'))>leftPos){
        $("#"+fishid).css({"transform": "rotateY(180deg)"});
    }
    $("#"+fishid).animate({"left": ll, "top": tt}, 1000+timeToMove, function(){swim(fishid);});
  }

    $(document).ready(function(){
    let fishes = Math.random()*5+5;
    for(i=0; i<fishes; i++){
     $("body").append('<div id="fish'+ i + '"><img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Animals-Fish-icon.png"></div>');
      swim("fish" + i);
    }
    $("*").click(function(ev){
      $("div").each(function(){
        $(this).stop();
        do_move($(this).attr("id"), ev.pageY-25, ev.pageX);
       });
    });
      $ ( window ).resize(function(){});// I have to do it with this also
    });
    </script>
</head>
<body>


</body>
</html>

Ответы [ 3 ]

0 голосов
/ 19 марта 2020

Событие изменения размера будет срабатывать при каждом изменении размера экрана. Вы можете легко получить одинаковую внутреннюю ширину и высоту экрана. 

$(window).resize(function(e){
  console.log($(this).innerWidth())
  console.log($(this).innerHeight())
});
0 голосов
/ 19 марта 2020 
newLeft = Math.random() *$( window ).width(); 
newTop = Math.random() *$( window ).height()

https://jsfiddle.net/rkv88/nh1buw8o/

0 голосов
/ 19 марта 2020

Используйте фактические размеры окна вместо жестко заданных значений: 

newLeft = Math.random() * window.innerWidth * 0.9;
newTop = Math.random() * window.innerHeight * 0.9;

Не требуется обработчик события изменения размера, поскольку функция swim() вызывается повторно. Это означает, что существует короткий период, когда fi sh может покинуть окно, но оно разрешается после одного программного цикла. Помещение overflow: hidden в тело устраняет полосы прокрутки при изменении размера.

Я ввел произвольный редуктор 90%, чтобы учесть размер fi sh. Это можно отрегулировать.

Демонстрация Fiddle

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

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

...