<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还是很陌生,我想你们将如何帮助我。预先谢谢你
[正如您在本摘要中所看到的,单击文档后,我添加了一个类,并基于此我们更改了元素位置bind/unbind mousemove
事件,并且还基于交替单击来删除添加的类,或不删除添加的类,我认为这是您想要的: