图像跟随鼠标,使用mousemove事件

问题描述 投票:1回答:1

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <title>Mouse Moving</title>

</head>

<body>

    <img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food">
    <br>
    
</body>
</html>

$(document).ready(function() {

  $(document).click(function(e) {
    $(".image").mousemove({ top: e.pageY, left: e.pageX });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <img class="image" 
    src="../images/food%20photgraphy2.jpg" 
    height="50px" width="55px" alt="food">
</body>

我试图使图像跟随鼠标,单击鼠标时,图像将停止跟随鼠标,但是单击鼠标时,图像将再次跟随鼠标。

<!DOCTYPE html>
<html>

<head>
    <!-- Project 5 part 1-->

    <meta charset="UTF-8">
    <meta name="description" content="Mousemove">
    
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

<script>
 $(document).ready(function() {

    $(document).click(function(e) {
     $(".image").mousemove({ top: e.pageY, left: e.pageX });
      });
      
    });
  </script>
</head>

<body>
    <img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food">
</body>
</html>

我将图像放在身体部位。

<body>
  <img class="image" 
    src="../images/food%20photgraphy2.jpg" 
    height="50px" width="55px" alt="food">
</body>

我不知道为什么它不起作用,我对Javascript还是很陌生,我想你们将如何帮助我。预先谢谢你

javascript jquery mousemove
1个回答
0
投票

[正如您在本摘要中所看到的,单击文档后,我添加了一个类,并基于此我们更改了元素位置bind/unbind mousemove事件,并且还基于交替单击来删除添加的类,或不删除添加的类,我认为这是您想要的:

© www.soinside.com 2019 - 2024. All rights reserved.