js中小天使随着鼠标移动而移动怎么写代码
时间: 2024-04-15 11:30:14 浏览: 18
你可以使用JavaScript来实现小天使随着鼠标移动而移动的效果。下面是一个简单的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#angel {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="angel" src="angel.png" alt="小天使">
<script>
document.addEventListener('mousemove', moveAngel);
function moveAngel(event) {
var angel = document.getElementById('angel');
angel.style.top = event.clientY + 'px';
angel.style.left = event.clientX + 'px';
}
</script>
</body>
</html>
```
在上面的代码中,我们先在HTML中创建一个图片元素表示小天使,并给它一个唯一的id。然后在JavaScript中,我们通过监听`mousemove`事件来实现小天使的移动。每次鼠标移动时,事件处理函数`moveAngel`会被调用,获取鼠标的当前位置(`event.clientX`和`event.clientY`),然后将小天使的位置设置为鼠标位置。
请确保将`angel.png`替换为您自己的小天使图片路径。此外,您可以根据需要在CSS中为小天使添加样式,以适应您的设计。