Question

我正在尝试在Angular项目中的mousemove上移动背景图片。它不起作用，我认为问题是加载：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

因为我在我的代码中手动调试：“console.log（”message“）并且没有任何反应，因此永远不会调用该函数。

一些代码：

HTML：

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
  </head>


  <body>
    <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, register as:</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>

      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script type="text/javascript">
      $("#bg").mousemove(function(e){
      var moveX=(e.pageX*-1/15);
      var moveY=(e.pageY*-1/15);
      console.log("dsd");
      $("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
      });
      </script>

    </body>
  </html>

CSS：

#bg { 
    height: 100vh;
    background-image: url('../../../images/1.jpg'); /*  Background Image Link */   
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container1 {
    display: table;
    width: 100%;
    height: 100%;
}

.row1{
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

这就是我想要的 https://codepen.io/chrisboon27/pen/rEDIC

Answer 1

您应该检查背景图片路径。

＆＃13;

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>


<body>
<div id="bg">
    <div class="container1" >
            <div class="row1">              
                
            </div>
    </div> <!-- /container -->
</div>
</body>

</html>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">
  $("#bg").mousemove(function(e){
      var moveX=(e.pageX*-1/15);
      var moveY=(e.pageY*-1/15);
      
      $("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
  });
</script>
<style>

#bg { 
    height: 100vh;
    background-image: url('https://i.stack.imgur.com/rhStR.jpg'); 
    
    /*  Background Image Link */   
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container1 {
    display: table;
    width: 100%;
    height: 100%;
}

.row1{
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
</style>

＆＃13;

在mousemove上移动背景图像不工作

1 个答案: