Question

在此页面上我需要一些帮助。它可以在笔记本电脑和台式机以及移动版本上使用，但是当我切换不同的窗口大小，移动版和台式机之间的所有大小时，我的徽标和光标将不会停留在同一位置，他们都移到了整个窗口的右边！我将发布一个视频链接，以便您可以确切地理解我的意思。我知道我的代码有问题，但是我不明白该如何解决。正如您将在视频链接以及JSFiddle链接上看到的那样，当我调整窗口大小时，徽标位于右侧，它位于页面右侧的某个位置，并且光标不在“按下”，但是它在单词“ ENTER”下，并且只要我调整窗口大小，它就会向右移动。仅当我处于移动模式和桌面模式时，徽标和光标才会保持静止。预先谢谢你！

Video Link

JSFiddle link

这是我的JS和CSS，下面是我的HTML。

<script>
          $(function() {
        var cursor;
        $('#cmd').click(function() {
          $('input').focus();
          cursor = window.setInterval(function() {
            if ($('#cursor').css('visibility') === 'visible') {
              $('#cursor').css({
                visibility: 'hidden'
              });
            } else {
              $('#cursor').css({
                visibility: 'visible'
              });
            }
          }, 500);

        });

        $('input').keyup(function() {
          $('#cmd span').text($(this).val());
        });

        $('input').blur(function() {
          clearInterval(cursor);
          $('#cursor').css({
            visibility: 'visible'
          });
        });
      });



      $( document ).ready(function() {
        $( "#cmd").trigger( "click" );
      });


    </script>

/*My Index */

#MyBackground {
    
    opacity: 0.6;
 
    /* Pacific Dream */
    background: #34e89e; 
    background: -webkit-linear-gradient(to right, #0f3443, #34e89e);  
    background: linear-gradient(to right, #0f3443, #34e89e);  
}

/* Aurora Logo */
.OurLogo {
    width: 10%;
    margin-left: 75em;
    margin-top: 11em;
}
    

html{
  height: 100%;
  width: 100%;
 }
 
 body{
  width: 100%;
  height: 100%;
 } 


.containersearchfunction{
  
  position: absolute;
  
 
}

/* The Main Text */
.EnterAText {
    color: rgb(144, 144, 160);
    text-align: center;
   
}
input.form-control.border-0 {
   
    background-color: white;
    
    height: 10em;
}
h2 {
    margin-top: 7em;
    color: rgb(255, 255, 255);
    
}

#cmd {
    font-family: courier;
    font-size: 14px;
    background: black;
    color: #FFFFFF;
    padding: 5px;
    overflow: hidden;
  }
  #cmd span {
    float: left;
    padding-left: 3px;
    white-space: pre;
  }
  #cursor {
  
    width: 1px;
    height: 84px;
    /* background: #21f838; */
    background: #FFFFFF;
    
  }
  input {
    width: 0;
    height: 0;
    opacity: 0;
    
  }
  div#cmd {
    padding-left: 10em;
    background: transparent;
  
    font-size: 4em;
  }

  /* When i resize the page */
  @media(max-width: 767px){
    div#cmd {
        padding-left: 4em;
        font-size: 4em;
      }
      

      .OurLogo {
        width: 10%;
        margin-left: 24em;
        margin-top: 9em;
        width: 20%;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
   integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
   integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 

 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
 
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

 <link href="style.css" rel="stylesheet" type="text/css" />

    <title>Aurora 4.0 Search Button Page</title>
</head>

<body id="MyBackground">
    

  <div container-fluid class="containersearchfunction">
    <div class="specific-div">
      <div class="EnterAText">
        <h2>TYPE AND PRESS “ENTER” TO SEARCH</h2>
        
        <div id="cmd">
          <span></span>
          <div id="cursor"> </div>

        </div>
      </div>
      <input type="text;" name="command" value=""/>
    </div>
    <div><img class="OurLogo" src="aurora_logoFINAL-01.png" alt="AuroraLogo"></div>
  </div>
           
</body>


</html>

Answer 1

由于没有人回答我的问题，并且由于我认为找到了答案，所以我想发布更新的代码，该代码似乎有效，并且确实满足我的要求。我不知道代码是否正确，尽管它完全符合我的要求，所以如果不正确，请纠正我！

这是现在的外观视频链接！检查光标和徽标。当我从移动版转到桌面版时，它们保持静止。

Video Link

下面是我的JS，我的CSS和我的HTML

  <script>
      $(function() {
        var cursor;
        $("#cmd").click(function() {
          $("input").focus();
          cursor = window.setInterval(function() {
            if ($("#cursor").css("visibility") === "visible") {
              $("#cursor").css({
                visibility: "hidden"
              });
            } else {
              $("#cursor").css({
                visibility: "visible"
              });
            }
          }, 500);
        });

        $("input").keyup(function() {
          $("#cmd span").text($(this).val());
        });

        $("input").blur(function() {
          clearInterval(cursor);
          $("#cursor").css({
            visibility: "visible"
          });
        });
      });

      $(document).ready(function() {
        $("#cmd").trigger("click");
      });
    </script>

.banner {
  height: 0px;
  max-width: 800px;
  margin: 13em auto 40px auto;
  background-color: blue;
  display: flex;
  text-align: center;
}

.center-me {
  color: white;
  font-size: 25px;
  margin: auto;
}

#MyBackground {
  opacity: 0.6;
  background: #34e89e;
  background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
  background: linear-gradient(to right, #0f3443, #34e89e);
}

#cmd {
  display: flex;
  font-size: 14px;
  color: #ffffff;
  padding: 5px;
  overflow: hidden;
}
#cmd span {
  margin-top: -0.4em;
  white-space: pre;
}
#cursor {
  width: 1px;
  height: 84px;
  margin-top: 0em;
  /* background: #21f838; */
  background: #ffffff;
}
input {
  width: 0;
  height: 0;
  opacity: 0;
  margin-top: -1em;
}
div#cmd {
  padding-left: 2em;
  background: transparent;
  font-size: 4em;
}

/* Aurora Logo */
img.OurLogo {
  max-width: 10%;
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 10px;
}

<body id="MyBackground">
    <div class="banner">
      <div class="center-me">
        <h2>TYPE AND PRESS “ENTER” TO SEARCH</h2>
        <div id="cmd">
          <span></span>
          <div id="cursor"></div>
          <input type="text;" name="command" value="" />
        </div>
      </div>
    </div>

    <footer>
      <div class="logo">
        <img class="OurLogo" src="aurora_logoFINAL-01.png" alt="AuroraLogo" />
      </div>
    </footer>
  
    <input type="text" onkeyup="this.value = this.value.toUpperCase();" />
  
  </body>
</html>

如何使徽标和光标具有响应性？

1 个答案: