onmousemove在页面上绘制
作者:
心存美好 | 来源:发表于
2022-03-30 15:19 被阅读0次<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
.box {
position: fixed;
width: 4px;
height: 4px;
background-color: #f00;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
document.onmousemove = function (ev) {
// console.log(ev);// 可以看到距离浏览器窗口的 clientX: 609 clientY: 690
let div = document.createElement('div');
div.className = 'box';
div.style.left = ev.clientX - 2 + 'px'; //-2是为了让鼠标点指向元素中心点
div.style.top = ev.clientY - 2 + 'px';
document.body.appendChild(div)//div创建后每次都加到页面上
}
</script>
</body>
</html>
本文标题：onmousemove在页面上绘制
本文链接：https://www.haomeiwen.com/subject/rzxwjrtx.html
网友评论