个人中心
gpt4 book ai didi

javascript - 如何设置一个随着窗口大小变化而变化的位置

转载 作者：行者123 更新时间：2023-12-02 20:50:16 24 4
gpt4 key购买 nike

我正在为我的爷爷创建一个网页，我将让这个骑自行车的小家伙跑过屏幕，当鼠标悬停在屏幕上时，它会停下来并说“戴上 Helm ”。我让他来回移动，它固定在导航栏上，但问题是，当屏幕尺寸改变时，比如在较小的手机或电脑上，骑车人就会在不同的位置转身，它会在前面跑导航栏的东西。

这是 html:

<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>CountrySideBycicling</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
    <script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>

<body>
<!-- lil dude -->
<h6 id="message"></h6>
  <img src="../lil dude/riding.gif" alt="riding" id="riding">
    <script>
      let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    if (x + document.getElementById('riding').style.width >= window.innerWidth - 550) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (x <= 200) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="../lil dude/stop.gif";
        message.style.top = (y - 40 + "px");
        message.style.left = (x + 50 + "px");
        message.innerHTML = "Wear a Helmet!";
        setTimeout(reset, 2000);console.log('hi');
    }
    else requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
        lastspeed = speed || lastspeed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
    console.log(mX + "   " + mY)
});

//braking it
function slow() {
    document.getElementById('riding').src="../lil dude/brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (Math.abs(speed)>0.01);
    speed=0;
}

//reset
function reset() {
    document.getElementById('riding').src="../lil dude/riding.gif";
    message.innerHTML = "";
    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }console.log(lastspeed,speed);
    }
    while(5-Math.abs(speed) > 0.01);
    move();
    counter = 0;
}
move();
    </script>







  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <!-- logo -->
            <img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="services.html">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contacts.html">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="brands.html.html">Brands</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div style="height: 50;"></div>
      <div class="jumbotron text-center">
<div class="container">
  <div style="height: 25px;"></div>
    <h1>CountrySideBycicling</h1>
    <div style="height: 25px;"></div>
    <p>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
       quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
   </p>
   <div style="height: 25px;"></div>
    <button class="btn btn-primary">Read More</button>
</div>
</div>


  <!-- Page Content -->
  <div class="container">

    <!-- Heading Row -->
    <div class="row align-items-center my-5">
      <div class="col-lg-7">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
      </div>
      <!-- /.col-lg-8 -->
      <div class="col-lg-5">
        <h1 class="font-weight-light">Business Name or Tagline</h1>
        <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
        <a class="btn btn-primary" href="#">Call to Action!</a>
      </div>
      <!-- /.col-md-4 -->
    </div>
    <!-- /.row -->

    <!-- Call to Action Well -->
    <div class="card text-white bg-secondary my-5 py-4 text-center">
      <div class="card-body">
        <p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
      </div>
    </div>


      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>

  <!-- Image Section - set the background image for the header in the line below -->
  <section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
    <!-- Put anything you want here! There is just a spacer below for demo purposes! -->
    <div style="height: 200px;"></div>
  </section>

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>


        <!-- slider -->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="carousel-item active"></div>
              <div id="target" class="carousel-item"></div>
              <div class="carousel-item"></div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
      <div style="height: 50px;"></div>



    </div>

</div>

<div class="container">
<!-- Content Row -->
<div class="row">
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card One</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Two</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Three</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>

 </div>
</div>


<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">

  <!-- Footer Links -->
  <div class="container text-center text-md-left">

    <!-- Footer links -->
    <div class="row text-center text-md-left mt-3 pb-3">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
        <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
          consectetur
          adipisicing elit.</p>
      </div>
      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>

      </div>

      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
        <p>
          <a href="gallery.html">Gallary</a>
        </p>
        <p>
          <a href="brands.html">Brands</a>
        </p>
        <p>
          <a href="about.html">About</a>
        </p>

      </div>

      <!-- Grid column -->
      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
        <p>
          <i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
        <p>
          <i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p>
        <p>
          <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Footer links -->

    <hr>

    <!-- Grid row -->
    <div class="row d-flex align-items-center">

      <!-- Grid column -->
      <div class="col-md-7 col-lg-8">

        <!--Copyright-->
        <p class="text-center text-md-left">© 2020 Copyright:
          <a href="http://www.countrysidebicycling.com/">
            <strong>countrysidebicycling.com</strong>
          </a>
        </p>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-5 col-lg-4 ml-lg-0">

        <!-- Social buttons -->
        <div class="text-center text-md-right">
          <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-facebook"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-instagram"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-twitter"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-pinterest"></span>
              </a>
            </li>
          </ul>
        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

</footer>


    <script src="jquery.slim.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

这是CSS

    margin: 0;
    padding: 0;
}

div{
    width: 100%;
    height: 100%;
}
.navbar-default {
    background: none;
}
.navbar{
  position: fixed;
  z-index: 10;
    padding: 10px 0 10px 10px;
    top: 0;
    width: 100%;
  }

  footer{
      background-color:#e6e6e6;
  }

  .jumbotron{
      background-image: url('download.jpeg');
      color: white;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 400px;
      margin-top: 0px;
      margin-bottom: 8px;
  }
  a{
      color:#2e5984;
  }

 .navbar-brand{
     height: 60px;
     width: 100px;
 }


 #aboutusimg{
     background-size: 100%;
        background-image: url(download.jpeg);

        background-repeat:no-repeat;

        height: 400px;
        }


/* slider */

.carousel .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel .carousel-item:first-of-type {
    background-image: url('download.jpeg');
}

.carousel .carousel-item:nth-of-type(2) {
    background-image: url("download.jpeg");
}

.carousel .carousel-item:last-of-type {
    background-image: url("download.jpeg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}


/* partners slider, about page */






/* carousel */

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */

  .slick-slide {
      margin: 0px 20px;
  }

  .slick-slide img {
      width: 100%;
  }

  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }

  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }

  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }

  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }


  /* lil dude */

  #riding{
    width: 50px;
    height: 40px;
    z-index: 30;
    position: fixed;
    top: 25px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    color: white;
    position: fixed;
    top: 0;
    left: 0;
}

请记住，还有其他文件，这只是index.html，因此CSS中还有其他内容，但是这个小家伙位于CSS的底部，在html中的导航栏之前。

最佳答案

当针对不同尺寸的屏幕调整导航栏尺寸时，硬编码值 200 和 550 将不起作用。我已将其更改为检索(.navbar-toggle 按钮或 .nav-item[0])的 offsetWidth 和 offsetLeft 以及 .navbar-brand 图像以反弹。 

body {

    margin: 0;
    padding: 0;
}

div{
    width: 100%;
    height: 100%;
}
.navbar-default {
    background: none;
}
.navbar{
  position: fixed;
  z-index: 10;
    padding: 10px 0 10px 10px;
    top: 0;
    width: 100%;
  }

  footer{
      background-color:#e6e6e6;
  }

  .jumbotron{
      background-image: url('download.jpeg');
      color: white;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 400px;
      margin-top: 0px;
      margin-bottom: 8px;
  }
  a{
      color:#2e5984;
  }

 .navbar-brand{
     height: 60px;
     width: 100px;
 }


 #aboutusimg{
     background-size: 100%;
        background-image: url(download.jpeg);

        background-repeat:no-repeat;

        height: 400px;
        }


/* slider */

.carousel .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel .carousel-item:first-of-type {
    background-image: url('download.jpeg');
}

.carousel .carousel-item:nth-of-type(2) {
    background-image: url("download.jpeg");
}

.carousel .carousel-item:last-of-type {
    background-image: url("download.jpeg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}


/* partners slider, about page */






/* carousel */

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */

  .slick-slide {
      margin: 0px 20px;
  }

  .slick-slide img {
      width: 100%;
  }

  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }

  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }

  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }

  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }


  /* lil dude */

  #riding{
    width: 50px;
    height: 40px;
    z-index: 30;
    position: fixed;
    top: 25px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    color: white;
    position: fixed;
    top: 0;
    left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>CountrySideBycicling</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
    <script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>

<body>
<!-- lil dude -->
<h6 id="message"></h6>
  <img src="../lil dude/riding.gif" alt="riding" id="riding">
    <script>
      let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    var v=document.getElementsByClassName('navbar-toggler')[0];
    if(v&&v.offsetLeft===0) v=document.getElementsByClassName('nav-item')[0];
    var w=document.getElementsByClassName('navbar-brand')[0];
    if (speed > 0 && x + document.getElementById('riding').style.width >= (v&&(v.offsetLeft-v.offsetWidth))) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (speed < 0 && x <= (!w||(w.offsetLeft+w.offsetWidth))) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="../lil dude/stop.gif";
        message.style.top = (y - 40 + "px");
        message.style.left = (x + 50 + "px");
        message.innerHTML = "Wear a Helmet!";
        setTimeout(reset, 2000);console.log('hi');
    }
    else requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
        lastspeed = speed || lastspeed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
    console.log(mX + "   " + mY)
});

//braking it
function slow() {
    document.getElementById('riding').src="../lil dude/brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (Math.abs(speed)>0.01);
    speed=0;
}

//reset
function reset() {
    document.getElementById('riding').src="../lil dude/riding.gif";
    message.innerHTML = "";
    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }console.log(lastspeed,speed);
    }
    while(5-Math.abs(speed) > 0.01);
    move();
    counter = 0;
}
move();
    </script>







  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <!-- logo -->
            <img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="services.html">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contacts.html">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="brands.html.html">Brands</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div style="height: 50;"></div>
      <div class="jumbotron text-center">
<div class="container">
  <div style="height: 25px;"></div>
    <h1>CountrySideBycicling</h1>
    <div style="height: 25px;"></div>
    <p>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
       quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
   </p>
   <div style="height: 25px;"></div>
    <button class="btn btn-primary">Read More</button>
</div>
</div>


  <!-- Page Content -->
  <div class="container">

    <!-- Heading Row -->
    <div class="row align-items-center my-5">
      <div class="col-lg-7">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
      </div>
      <!-- /.col-lg-8 -->
      <div class="col-lg-5">
        <h1 class="font-weight-light">Business Name or Tagline</h1>
        <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
        <a class="btn btn-primary" href="#">Call to Action!</a>
      </div>
      <!-- /.col-md-4 -->
    </div>
    <!-- /.row -->

    <!-- Call to Action Well -->
    <div class="card text-white bg-secondary my-5 py-4 text-center">
      <div class="card-body">
        <p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
      </div>
    </div>


      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>

  <!-- Image Section - set the background image for the header in the line below -->
  <section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
    <!-- Put anything you want here! There is just a spacer below for demo purposes! -->
    <div style="height: 200px;"></div>
  </section>

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>


        <!-- slider -->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="carousel-item active"></div>
              <div id="target" class="carousel-item"></div>
              <div class="carousel-item"></div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
      <div style="height: 50px;"></div>



    </div>

</div>

<div class="container">
<!-- Content Row -->
<div class="row">
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card One</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Two</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Three</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>

 </div>
</div>


<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">

  <!-- Footer Links -->
  <div class="container text-center text-md-left">

    <!-- Footer links -->
    <div class="row text-center text-md-left mt-3 pb-3">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
        <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
          consectetur
          adipisicing elit.</p>
      </div>
      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>

      </div>

      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
        <p>
          <a href="gallery.html">Gallary</a>
        </p>
        <p>
          <a href="brands.html">Brands</a>
        </p>
        <p>
          <a href="about.html">About</a>
        </p>

      </div>

      <!-- Grid column -->
      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
        <p>
          <i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
        <p>
          <i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p>
        <p>
          <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Footer links -->

    <hr>

    <!-- Grid row -->
    <div class="row d-flex align-items-center">

      <!-- Grid column -->
      <div class="col-md-7 col-lg-8">

        <!--Copyright-->
        <p class="text-center text-md-left">© 2020 Copyright:
          <a href="http://www.countrysidebicycling.com/">
            <strong>countrysidebicycling.com</strong>
          </a>
        </p>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-5 col-lg-4 ml-lg-0">

        <!-- Social buttons -->
        <div class="text-center text-md-right">
          <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-facebook"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-instagram"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-twitter"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-pinterest"></span>
              </a>
            </li>
          </ul>
        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

</footer>


    <script src="jquery.slim.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css

关于javascript - 如何设置一个随着窗口大小变化而变化的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61622962/

24 4 0
文章推荐： javascript - 具有可重用事件处理程序方法的自定义元素类
文章推荐： javascript - 是否有/什么是在 Angular 应用程序中查询所有 `img` 标签的最佳方法？
文章推荐： javascript - 嵌入图像并不总是出现在 JavaScript 创建的页面中
文章推荐： javascript - 同步运行 Mongo find
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com