用js写跟随鼠标移动
时间: 2023-01-11 19:55:36 浏览: 80
可以使用 JavaScript 在网页中跟随鼠标移动。下面是一个例子:
```
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
document.addEventListener("mousemove", function(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("box").style.top = y + "px";
document.getElementById("box").style.left = x + "px";
});
</script>
</body>
</html>
```
这段代码会在页面中创建一个红色的正方形,并使它跟随鼠标的移动而移动。
希望这对你有帮助!
相关问题
用js写一个跟随鼠标移动的点
好的,以下是实现跟随鼠标移动的点的JS代码:
```javascript
// 创建一个div元素作为点
var dot = document.createElement('div');
dot.style.width = '10px';
dot.style.height = '10px';
dot.style.borderRadius = '50%';
dot.style.backgroundColor = 'red';
dot.style.position = 'absolute';
document.body.appendChild(dot);
// 监听鼠标移动事件
document.addEventListener('mousemove', function(e) {
// 获取鼠标当前位置
var x = e.clientX;
var y = e.clientY;
// 将点的位置设置为鼠标位置
dot.style.left = x + 'px';
dot.style.top = y + 'px';
});
```
解释一下上面的代码:
首先我们创建了一个div元素,作为我们的点,并设置了点的样式。然后我们监听了整个文档的`mousemove`事件,当鼠标移动时,获取鼠标的位置,并将点的位置设置为鼠标的位置。最后,我们将点添加到了`body`元素中。
这样就实现了一个简单的跟随鼠标移动的点。
html绘制小球并跟随鼠标移动,利用JS如何实现小球跟随鼠标移动
你可以使用HTML5的Canvas元素和JavaScript来实现小球跟随鼠标移动的效果。
首先,在HTML中创建一个Canvas元素,并设置它的宽度和高度以适应屏幕:
```
<canvas id="myCanvas" width="500" height="500"></canvas>
```
接下来,使用JavaScript获取Canvas元素,并在上面绘制一个小球:
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制小球
ctx.beginPath();
ctx.arc(50, 50, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
```
这将在Canvas元素上绘制一个红色的小球,位于坐标(50,50)处。
接下来,你需要监听鼠标移动事件,并计算出小球应该移动的位置。可以使用以下代码来实现这一点:
```
canvas.addEventListener("mousemove", function(event) {
var mouseX = event.clientX - canvas.offsetLeft;
var mouseY = event.clientY - canvas.offsetTop;
// 计算小球应该移动到的位置
var ballX = mouseX;
var ballY = mouseY;
// 清除画布并重新绘制小球
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
});
```
这将监听Canvas元素上的“mousemove”事件,并计算出鼠标的位置。然后,它将清除画布并重新绘制小球在鼠标的位置上。
这样,你就可以实现小球跟随鼠标移动的效果了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)