Как я могу увеличить масштаб элемента с помощью прокрутки?

ProgramBox

Как я могу увеличить масштаб элемента с помощью прокрутки?

Post author:admin
Запись опубликована:9 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

В настоящее время я изучаю javascript и столкнулся с проблемой, из-за которой я застрял:
у меня есть a div с a 90% height и a 80% width .
Я пытаюсь увеличить это div значение при прокрутке до полного размера экрана (должно занимать весь дисплей) ( 100% width , 100% height ).

Я пробовал циклы for и do-while, но, похоже, это не работает.
Кажется, что height и width div не изменяют стиль элемента.

Кто-нибудь знает, как это исправить?
Я действительно с нетерпением жду любых советов, которые вы можете мне дать, чтобы реализовать мой проект и учиться на своих ошибках.

Ниже приведен мой текущий код :

 $(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();
      
      console.log("Scroll:"  pos);
      
      var div = document.getElementsByClassName('home');
      
      if(pos>300){
         let h = 90   (pos/150);
         let w = 80   1  (pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = " " "   h   " %"";
         w = " " "   w   " %"";

         console.log(h);

         document.getElementsByClassName('home').height = Math.round(h);
         document.getElementsByClassName('home').width = Math.round(w);
      }
   });
});

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 5%;
    left: 10%;
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Timo Roedler</title>
        <meta name="description" content="small test with Scrolling">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="headline">

            </div>
            <div class="main">
                <div class="home">
                    
                </div>
                <div class="supply">
                    <div class="supply1">
                        
                    </div>
                    <div class="supply2">

                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>
</html>

Развернуть фрагмент

Ответ №1:

Очень хорошая попытка. У вас просто есть несколько неправильных вещей.

Нацеливание на элемент

Прямо сейчас у вас есть следующий код.

 var div = document.getElementsByClassName('home');

В этом вы пытаетесь настроить таргетинг на свой «домашний» элемент, и синтаксис правильный, но он не вернет узел. .getElementsByClassName() возвращает объект, подобный массиву, что означает, что вам нужно будет получить к нему доступ с помощью document.getElementsByClassName('home')[0] или div[0] . Лично я предпочитаю использовать document.querySelector() , но вы также можете использовать jQuery для получения нужного элемента.

Применение стиля

Вот ваш код:

 h = " " "   h   " %"";

document.getElementsByClassName('home').height = Math.round(h)

Во-первых, природа строк в JavaScript позволяет вам просто использовать h = h '%' . Кроме того, если вам нужно включить кавычки в строку (вы этого не делаете, но это может быть полезно знать), вы можете заключить их в одинарные кавычки: var message = 'the "name" field is required.' как только у вас есть строка, вы больше не можете использовать Math.round() ее. Math.round() принимает только число. В этом случае, однако, нет необходимости округлять. Вы можете использовать неокругленное значение, но вы не должны применять его к .height . Это свойство устарело, и его предпочтительнее присвоить свойству стиля CSS, которое .style.height .

Центрирование вашего элемента

В вашем коде вы пытаетесь сместить элемент, используя 5% и 10% сверху и слева соответственно. Вам также придется изменять их при изменении высоты, или вы можете использовать преобразования для центрирования вашего элемента следующим образом:

         top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

В целом, хороших усилий и удачи в ваших усилиях по изучению JavaScript. Это очень интересный язык для изучения. Ниже я включил фрагмент кода с этими изменениями. Надеюсь, это поможет продемонстрировать приведенную выше информацию.

Показать фрагмент кода

 $(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();
      
      //console.log("Scroll:"  pos);
      
      var div = document.querySelector('.home');
      
      if(pos>300){
         let h = 90   (pos/150);
         let w = 80   1  (pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = h   "%";
         w = w   "%";

         //console.log(h);

         document.querySelector('.home').style.height = h;
         document.querySelector('.home').style.width = w;
      }
   });
});

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Timo Roedler</title>
        <meta name="description" content="small test with Scrolling">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="headline">

            </div>
            <div class="main">
                <div class="home">
                    
                </div>
                <div class="supply">
                    <div class="supply1">
                        
                    </div>
                    <div class="supply2">

                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>
</html>

Развернуть фрагмент

1. О, вау, большое тебе спасибо. Объяснение лучше и подробнее, чем я ожидал. Не могу отблагодарить вас! Я действительно в отчаянии последние два дня, и без вашего halp, вероятно, и в следующие дни тоже.

Ответ №2:

При беглом взгляде это может иметь какое-то отношение к этим строкам

      // You were trying to use Math.round on a string.
     h = Math.round(h)   "%";
     w = Math.round(w)   "%";
     console.log(h);
     // assign the percentage directly to the style
     document.getElementsByClassName('home').style.height = h;
     document.getElementsByClassName('home').style.width = w;