javascript - 用鼠标移动背景后的右边缘

因此，我正在使用mousemove移动背景透 View 。

问题是移动后图像的右边距。最初，一切都很好。

如何避免呢？



HTML-

<div id="bg">
    <div class="container1" >
            <div class="row1">
                    <div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
                        <h1 class="title">Keeping track of your health. I`m a:</h1>
                    </div>
                        <div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
                                <a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
                                <a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
                                <a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
                        </div>
            </div>
    </div> <!-- /container -->
</div>

CSS-

#bg {
height: 100vh;
background-image: url('../../../images/3.png'); /*  Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

Javascript-

$(document).ready(function() {
  $("#bg").mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 65;
    var y = -(e.pageY + this.offsetTop) / 65;
    $('#bg').css("background-position", x + "px " + y + "px");
  });
});

最佳答案

您可以通过扩展图像背景并删除background-position:center来实现效果，(用background-size:cover代替background-size:120%;)

请参见下面的代码段:

$(document).ready(function() {
  $("#bg").mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 40;
    var y = -(e.pageY + this.offsetTop) / 40;
    $('#bg').css("background-position", x + "px " + y + "px");
  });
});

#bg {
  height: 100vh;
  background-image: url('https://i.pinimg.com/originals/01/66/28/0166280c7713de4cc466aa3ca7052d11.jpg');
  /*  Background Image Link */
  background-size: 120%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="bg">
  <div class="container1">
    <div class="row1">
      <div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
        <h1 class="title">Keeping track of your health. I`m a:</h1>
      </div>
      <div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true">
        <a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
        <a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
        <a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
      </div>
    </div>
  </div>
  <!-- /container -->
</div>